React Router - 需要帮助路由答案

【问题标题】：React Router - need help routingReact Router - 需要帮助路由
【发布时间】：2020-06-19 10:37:57
【问题描述】：

我的问题：如果我打开http://example.test/profile/create，则不会加载新配置文件组件。与查看和编辑路线相同。

事实上，如果我点击Link 到profile/create，它会在标题组件下方显示一个空白区域。如果我尝试直接通过url或者刷新页面去上面的地址，会显示404 page not found错误。

<BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route exact path='/login' component={LoginComponent} />
                        <Route exact path='/register' component={RegisterComponent} />
                        <Route exact path='/profile'>
                            <Route exact path='/create' component={NewProfile} />
                            <Route exact path='/view'>
                                <Route path='/:id' component={ProfileDetail} />
                            </Route>
                            <Route exact path='/edit'>
                                <Route path='/:id' component={EditProfile} />
                            </Route>
                        </Route>
                    </Switch>
                </div>
            </BrowserRouter>

PS - 以下代码适用于 http://example.test/create 和 http://example.test/1：

<BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route path='/login' component={LoginComponent} />
                        <Route path='/register' component={RegisterComponent} />
                        <Route path='/create' component={NewProfile} />
                        <Route path='/:id' component={ProfileDetail} />
                    </Switch>
                </div>
            </BrowserRouter>

我正在使用 Laravel 7 来运行我的服务器。 routes/web.php 文件看起来像这样 -

<?php

Route::view('/{path?}', 'app');

【问题讨论】：

标签： laravel react-router react-router-dom

【解决方案1】：

希望这对某人有所帮助。

关键在于添加一个match.path 变量。首先是我的 App.js 文件（条目我的应用程序的位置） -

class App extends Component {
    render () {
        return (
            <BrowserRouter>
                <div>
                    <Header />
                    <Switch>
                        <Route exact path='/' component={ProfilesList} />
                        <Route path='/login' component={LoginComponent} />
                        <Route path='/register' component={RegisterComponent} />
                        <Route path='/profile' component={Profiles} />
                    </Switch>
                </div>
            </BrowserRouter>
        )
    }
}

接下来是处理配置文件链接路由的 Profiles.js 文件。

const Profiles = ({match}) => {

    return (
        <BrowserRouter>
            <Switch>
                <Route path={`${match.path}/create`} component={NewProfile}/>
                <Route path={`${match.path}/view`} render={({match}) => (
                    <Route path={`${match.path}/:id`} component={ProfileDetail}/>
                )} />
                <Route path={`${match.path}/edit`} render={({match}) => (
                    <Route path={`${match.path}/:id`} component={EditProfile}/>
                )} />
            </Switch>
        </BrowserRouter>
    )
}

export default Profiles

我在尝试手动访问 url 时仍然遇到浏览器抛出 404 的问题。我知道答案在于this answer by Stijn de Witt - 我很可能想做他提出的包罗万象的解决方案，但我不知道该怎么做。有人可以帮忙吗？

【讨论】：