时间戳

首页 > 解决方案 > React Router 不匹配路由

reactjs - 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”组件。

如果有帮助，这是我的来自 Audit 组件的 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;

标签： reactjsreact-routerreact-router-dom

解决方案

您只需要包装<BrowserRouter>一次，通常使用 Theapp.js并且您的嵌套路由<Audit>应该是path='/audit/general'Try 如果可行的话。我刚刚注意到你在 app.js 中有两个确切的路径，只有一个应该存在。

推荐阅读