Question

我创建了将用户重定向到登录页面的应用程序，如果他登录，则他可以访问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>

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

Answer 1

您需要一种模式才能使路线匹配。

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

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

Answer 2

您所遇到的问题是，您有一个Switch组件，该组件在始终匹配的path='/'之前渲染NotFound route并带有Redirect或渲染{ {1}}组件，因此控件永远不会到达Home。

您需要稍微重构代码以编写PrivateRoute HOC。 Refer to this link to implement a PrivateRoute component并将其用于您要验证的所有路由，然后对不匹配的路由使用404路由

使用重定向到登录页面但也具有404 NotFound路由的React Router

2 个答案: