React Router 重定向到登录页面,但也有 404 Not Found 路由

React Router with redirection to login page but also to have 404 NotFound route

我创建了将用户重定向到登录页面的应用程序,如果他登录了,他就可以访问主页组件中定义的站点的其他路由。问题是我现在无法添加 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>

当我打开不存在的路由时,它仍然显示主页...

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

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

要使其正常工作,请确保在它匹配之前没有任何路由,就像在您的示例中一样。

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

您需要稍微重构一下代码才能编写 PrivateRoute HOC。 并将其用于您要验证的所有路由,然后对于不匹配的路由呈现 404 路由