如何解决路由渲染了错误的组件ReactJS
调用URL / folders / xy后,我试图访问FolderDetail组件。我始终没有获得FolderDetail组件,而总是获得位于/ folders的Folders组件...请帮助。
import React from 'react';
import { BrowserRouter,Route,Switch } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route path="/" component={Home} exact />
<Route path="/folders" component={Folders} />
<Route path="/folders/:id" component={FolderDetail} />
<Route path="/login" component={Login} />
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
解决方法
一个交换机采用第一个匹配的路由,因此您需要像这样重新排序路由(还添加exact
)
<Switch>
<Route exact path="/folders/:id" component={FolderDetail} />
<Route exact path="/folders" component={Folders} />
<Route exact path="/login" component={Login} />
<Route exact path="/" component={Home} exact />
</Switch>
始终将更具体的路线放在首位。
,您应该将exact
添加到所有Routes组件,这是有效的codesandbox:
const App = () => {
return (
<BrowserRouter>
<div className="App">
<Navigation />
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/folders" component={Folders} />
<Route exact path="/folders/:id" component={FolderDetail} />
</Switch>
</div>
</BrowserRouter>
);
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。