React router v5：第三层嵌套无法识别路径

Question

我正在创建一个需要多层嵌套的应用程序。从第 3 级开始，我的路线未被识别。

应用程序 JS

const App = () => {
  return (
    <React.Fragment>
      <Router>
        <Switch>
          <Route path="/login">
            <Login />
          </Route>
          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </Router>
    </React.Fragment>
  );
};

主页 JS

export default class Home extends React.Component {
  render() {
    return (
      <React.Fragment>
        <Header />
        <ContentNav />

        <Switch>
          <Route path="/clients">
            <Clients />
          </Route>
          <Route path="/publishers">
            <Publishers />
          </Route>
          <Route path="/">
            <Redirect to="/clients" />
          </Route>
        </Switch>
      </React.Fragment>
    );
  }
}

客户 JS

class Clients extends React.Component {
  render() {
    return (
      <React.Fragment>
        Clients Page
        <Switch>
          <Route path="/add">
            <AddClient />
          </Route>
          <Route path="/edit">
            <AddClient />
          </Route>
          <Route path="/">
            <Entity />
          </Route>
        </Switch>
      </React.Fragment>
    );
  }
}

这些路由器渲染相同的组件
http://localhost:3000/clients
http://localhost:3000/clients/add
http://localhost:3000/clients/edit

Answer 1

react 嵌套 url 不是相对的，必须指定绝对路径：

<Switch>
    <Route path="clients/add">
        <AddClient />
    </Route>
    <Route path="clients/edit">
        <AddClient />
    </Route>
    <Route path="clients/">
        <Entity />
    </Route>
</Switch>

React router v5：第三层嵌套无法识别路径

React router v5 : 3rd level of nesting is not recognising path

javascript

url-routing

reactjs

react-router

react-native