如何解决React Router不匹配路由
我无法按预期运行路线。我怀疑这是因为我的App.js设置的Routes运行正常。但是,在那些路由之一中,我希望该页面也拥有自己的路由。这些是我无法工作的。我无法弄清楚哪里出了问题。
这是我的App.js,它运行良好:
const App = () => {
return (
<div className="App">
<NavBar />
<Router history={history}>
<Switch>
<Route exact path="/" component={Tools} />
<Route exact path="/audit" component={Audit} />
<Route component={NoMatch} />
</Switch>
</Router>
</div>
);
}
export default App;
但是,如果您转到“审核”组件,则该页面是一个页面,它具有自己的菜单来显示不同的组件。这是该代码:
const Audit = () => {
return (
<div>
<NavTabs />
<Router history={history}>
<Switch>
<Route exact path="/general" component={General} />
<Route exact path="/culture" component={Culture} />
<Route exact path="/performance" component={Performance} />
</Switch>
</Router>
</div>
);
}
export default Audit;
当我单击其中任何一个时,我都得到了App.js要求的“ NoMatch”组件。
如果有帮助,这是来自“审核”组件的NavBar:
class NavTabs extends Component {
render() {
return (
<Nav fill variant="tabs" defaultActiveKey="/general">
<Nav.Item>
<Nav.Link href="/general">General</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/culture" eventKey="link-1">
Culture
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link href="/performance" eventKey="link-2">
Performance
</Nav.Link>
</Nav.Item>
</Nav>
);
}
};
export default NavTabs;
解决方法
您通常只需要用<BrowserRouter>
包装一次app.js
,并且您在<Audit>
中的嵌套路由应该是path='/audit/general'
,请尝试是否可行。
我刚刚注意到您在app.js中有两个确切的路径。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。