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