[英]Why are my React components rendering in all routes?
This is the my App() function in App.js, the comps: "Sidebar, Feed and Widgets" keeps rendering in route ="/"
and also ="/login"
as well, in addition to that "Login" comp didn't even render in route ="/login"
.这是 App.js 中的我的 App() function,comps: “Sidebar, Feed and Widgets”保持在route ="/"
和="/login"
中呈现,除了“Login”comp 没有'甚至没有在 route ="/login"
中渲染。
<Router>
<div className="app">
<Switch>
<Route path="/">
<Sidebar />
<Feed />
<Widgets />
</Route>
<Route path="/login">
<Login />
</Route>
</Switch>
</div>
</Router>
If you are using the latest version of react-router-dom
, you must change the Switch
to Routes
如果您使用的是最新版本的react-router-dom
,则必须将Switch
更改为Routes
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
import { Sidebar, Feed, Widgets } from '...'
const Home = () => {
return (
<Sidebar />
<Feed />
<Widgets />
)
}
const App = () => {
return (
<Router>
<div className="app">
<Routes>
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
</Routes>
</div>
</Router>
)
}
The Switch
component exclusively matches and renders routes, so only 1 route can ever be matched. Switch
组件专门匹配和渲染路由,因此只能匹配 1 个路由。 You've an issue with the order of your routes though, so only the "/"
path matches since it's earlier and is rendered.但是,您的路线顺序存在问题,因此只有"/"
路径匹配,因为它更早并且被渲染。 The route for "/login"
can never be reached, as-is. "/login"
的路径永远无法按原样到达。
In other words, this means is that when the path is "/login"
that "/"
still matches it and is the route rendered.换句话说,这意味着当路径是"/login"
时, "/"
仍然匹配它并且是渲染的路由。 In react-router-dom
v5 think of the path
props as a "path prefix".在react-router-dom
v5 中,将path
道具视为“路径前缀”。
In the Switch
component, path order and specificity matter.在Switch
组件中,路径顺序和特异性很重要。 You should order the paths from more specific to less specific.您应该将路径从更具体到不太具体。 This allows more specific paths like "/login"
to be matched before trying the less specific paths.这允许在尝试不太具体的路径之前匹配更具体的路径,如"/login"
。
<Router>
<div className="app">
<Switch>
<Route path="/login">
<Login />
</Route>
<Route path="/">
<Sidebar />
<Feed />
<Widgets />
</Route>
</Switch>
</div>
</Router>
Yeah if you got the resources, i recommend upgrading to the v6!是的,如果你有资源,我建议升级到 v6! The new <Routes>
instead of <Switch>
has much better route matching so u wont run in to this problem新的<Routes>
而不是<Switch>
有更好的路由匹配,所以你不会遇到这个问题
You need to add exact with "/'" route.您需要添加精确的“/'”路线。
In your case when you are not adding exact, React router will match '/login' path with the first path '/' and will render accordingly without checking next routes.在您没有添加精确的情况下,React 路由器会将“/login”路径与第一个路径“/”匹配,并将相应地呈现而不检查下一个路由。 By adding exact, first '/' will not match and it will match with second route '/login'.通过添加精确,第一个'/'将不匹配,它将与第二个路由'/login'匹配。
<Router>
<div className="app">
<Switch>
<Route path="/" exact>
<Sidebar />
<Feed />
<Widgets />
</Route>
<Route path="/login">
<Login />
</Route>
</Switch>
</div>
</Router>
For more information, you can also refer this similar question: React: difference between <Route exact path="/" /> and <Route path="/" />有关更多信息,您还可以参考这个类似的问题: React: difference between <Route exact path="/" /> and <Route path="/" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.