Вложенная маршрутизация в ReactJS - PullRequest
Новая
       32

Вложенная маршрутизация в ReactJS

0 голосов
/ 28 мая 2020

У меня очень простая проблема с маршрутизацией в ReactJS. У меня проблема с моим PrivateRoute. Я не могу перенаправить на маршруты клиента или продукта. Пожалуйста, проверьте мой код ниже. Спасибо.

Маршруты. 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;

Обычное. 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;

Ответы [ 2 ]

1 голос
/ 28 мая 2020

При рендеринге вложенных маршрутов вам необходимо добавить путь URL до вложенных маршрутов.

Вложение маршрута

РЕДАКТИРОВАТЬ: означал использовать 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>
  );
};

ПРИМЕЧАНИЕ: Немного изменен порядок маршрутов, чтобы они соответствовали более конкретным * Сначала 1028 * путей, поскольку Switch возвращает только первое совпадение.

Вам также необходимо удалить опору exact из вашего root маршрутизатора, чтобы он мог продолжать соответствовать другим суб- маршруты в пределах Common. 

function Routes() {
  return (
    <Router>
      <Switch>
        <Route path="/login" component={Login} />
        <Route path="/signup" component={Signup} />
        <PrivateRoute path="/" component={Common} />
      </Switch>
    </Router>
  );
}
0 голосов
/ 28 мая 2020

Удалить точное свойство из 

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

Exact будет соответствовать только '/'. Вы бы хотели, чтобы он соответствовал всем маршрутам, начинающимся с /. Также разместите частный маршрут последним после входа в систему и регистрации

...