[英]<Redirect /> doesn't work when I separate the routes into other components
The problem is that when entering a route that does not exist the does not work, this only happens when I separate the / login and / register routes in another component, is there any way to solve it?问题是当输入一个不存在的路由时不起作用,只有当我将 /login 和 /register 路由分开在另一个组件中时才会发生这种情况,有什么办法解决吗? Thanks for reading谢谢阅读
AppRouter.js AppRouter.js
import React from 'react'
import {
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect
} from 'react-router-dom'
import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'
export default function AppRouter() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/noexists">no exists</Link>
</li>
<li>
<Link to="/register">register</Link>
</li>
<li>
<Link to="/login">login</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={JournalScreen} />
<AuthRoutes />
<Redirect to="/" />
</Switch>
</Router>
)
}
AuthRoutes.js AuthRoutes.js
import React from 'react'
import { Route } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'
export default function AuthRouter() {
return (
<div className="app__auth">
<Route path="/login" component={LoginScreen} />
<Route path="/register" component={RegisterScreen} />
</div>
)
}
From the react router docs :从反应路由器文档:
<Switch>
Renders the first child <Route> or <Redirect> that matches the location.
So, your Route
components have to be direct children of Switch
in order to work properly.因此,您的Route
组件必须是Switch
的直接子组件才能正常工作。
This can be solved by using fragments in your AuthRouter
component这可以通过在AuthRouter
组件中使用片段来解决
export default function AuthRouter() {
return (
<>
<Route path="/login" component={LoginScreen} />
<Route path="/register" component={RegisterScreen} />
</>
)
}
Another thing to note is that all react-router functions will only work in elements that are a child of a Router
component.另一件需要注意的是,所有 react-router 函数只能在作为Router
组件的子元素的元素中工作。 So if you have another component that is not a child of AppRouter
, you won't be able to use any of react-router's capabilities因此,如果您有另一个不是AppRouter
子组件的组件,您将无法使用 react-router 的任何功能
Most commonly, wrapping your entire app in a single Router
component is the way to go.最常见的是,将整个应用程序包装在单个Router
组件中是 go 的方式。 This is also taken from the docs :这也取自 文档:
To use a router, just make sure it is rendered at the root of your element
hierarchy. Typically you’ll wrap your top-level <App> element in a router
I found this solution:我找到了这个解决方案:
AppRouter.js AppRouter.js
import React from 'react'
import {
BrowserRouter as Router,
Route,
Switch,
Link,
Redirect
} from 'react-router-dom'
import JournalScreen from '../screens/JournalScreen'
import AuthRoutes from './AuthRoutes'
export default function AppRouter() {
return (
<Router>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/noexists">no exists</Link>
</li>
<li>
<Link to="/register">register</Link>
</li>
<li>
<Link to="/login">login</Link>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={JournalScreen} />
<AuthRoutes />
<Redirect to="/" />
</Switch>
</Router>
)
}
AuthRoutes.js AuthRoutes.js
import React from 'react'
import { Route, Switch, Redirect } from 'react-router-dom'
import LoginScreen from '../screens/LoginScreen'
import RegisterScreen from '../screens/RegisterScreen'
export default function AuthRoutes() {
return (
<div className="app__auth">
<Switch>
<Route path="/login" component={LoginScreen} />
<Route path="/register" component={RegisterScreen} />
<Redirect to="/" />
</Switch>
</div>
)
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.