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中有两个确切的路径。