ReactJS 中的嵌套路由

Question

我在 ReactJS 中的路由中遇到了一个非常简单的问题。我的 PrivateRoute 有问题。我无法重定向到客户或产品路线。请在下面检查我的代码。谢谢

Routes.js

function Routes() {
  return (
    <Router>
      <Switch>
        <PrivateRoute exact path="/" component={Common} />
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
      </Switch>
    </Router>
  );
}

export default Routes;

Common.js

const Common = () => {
    const classes = useStyles();
    return (
      <div>
        <div className={classes.root}>
          <CssBaseline />
          <SideNav />
          <main className={classes.content}>
            <div className={classes.toolbar} />
            <Switch>
              <PrivateRoute path="/" component={Dashboard} />
              <PrivateRoute path="/dashboard" component={Dashboard} />
              <PrivateRoute path="/customers" component={Customers} />
              <PrivateRoute path="/customers/:id" component={CustomersDetail} />
              <PrivateRoute path="/products" component={Products} />
              <PrivateRoute path="/products/:id" component={ProductsDetail} />
            </Switch>
          </main>
        </div>
      </div>
    );
  };

  export default Common;

Answer 1

渲染嵌套路由时，您需要将 url 路径添加到嵌套路由之前。

Route Nesting

编辑： 意味着使用 match.path 而不是 match.url。 path 是用于匹配的路径模式，对构建嵌套路由很有用。

const Common = ({ match: { path } }) => { // extract the path from match route prop
  const classes = useStyles();
  return (
    <div>
      <div className={classes.root}>
        <CssBaseline />
        <SideNav />
        <main className={classes.content}>
          <div className={classes.toolbar} />
          <Switch>
            <PrivateRoute path={`${path}/customers/:id`} component={CustomersDetail} />
            <PrivateRoute path={`${path}/customers`} component={Customers} />
            <PrivateRoute path={`${path}/products/:id`} component={ProductsDetail} />
            <PrivateRoute path={`${path}/products`} component={Products} />
            <PrivateRoute path={[`${path}/`, `${path}/dashboard`]} component={Dashboard} />
          </Switch>
        </main>
      </div>
    </div>
  );
};

注意： 对路由重新排序，以便首先匹配更具体的路径，因为 Switch returns 只有第一个匹配项。

您还需要从根路由器中删除 exact 属性，以便它可以继续匹配 Common.

中的其他子路由

function Routes() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/" component={Common} />
      </Switch>
    </Router>
  );
}

Answer 2

从

中删除确切的道具

<PrivateRoute path="/" component={Common} />

完全匹配只会匹配“/”。您希望它匹配所有以 / 开头的路由。还要在登录和注册后将私有路由放在最后

ReactJS 中的嵌套路由

Nested Routing in ReactJS

reactjs

react-router

react-router-v4

react-router-dom