首页 文章

React路由器重定向到登录页面，但也有404 NotFound路由

提问于
浏览 次
0

我创建了将用户重定向到登录页面的应用程序，如果他登录，则可以访问在Home组件中定义的站点的其他路径 . 问题是我现在无法添加NotFound路由 . 这是我的代码

<BrowserRouter basename="/">
                <main>
                    <Switch>
                        <Route exact path="/login"
                            render={(props) => <Login {...props} setLoggedIn={() => this.setLoggedIn()}/>}/>
                        <Route  path="/" render={(props) => (
                            this.state.isAdminLogin ? (
                                <Home {...props} />
                            ) : (
                                <Redirect to="/login"/>
                            )
                        )}/>
                       <Route component={NotFound} />
                    </Switch>
                </main>
            </BrowserRouter>

当我打开不存在的路线时，它仍显示主页...

reactjs redirect react-router-v4

2 回答

  • 1

    你的情况下的问题是你有一个 Switch 组件，它在 NotFound route 之前呈现一个带有 path='/' 的Route，它始终匹配，并且 Redirect 或渲染 Home 组件，因此控件永远不会到达 NotFound Route .

    您需要重新编写代码以编写PrivateRoute HOC . Refer to this link to implement a PrivateRoute component并将其用于要进行身份验证的所有路由，然后用于不匹配的路由以呈现404路由

    回复于
  • 1

    您需要一个模式才能匹配路由 .

    <Route path="*" component={NotFound} />

    要使其正常工作，请确保在匹配之前没有任何路由，例如在您的示例中 .

    回复于

相关问题