Реакция Исключить маршруты

Question

Я добавляю блог в свое приложение реакции, и мне нужно использовать слагов из корня, таких как

  export default new ClientModule({
  route: [
    <Route exact path="/posts" component={loadable(() => import('./containers/Post').then(c => c.default))} />,
    <Route exact path="/post/new" component={loadable(() => import('./containers/PostAdd').then(c => c.default))} />,
    <Route path="/post/:id" component={loadable(() => import('./containers/PostEdit').then(c => c.default))} />,
    <Route path="/:slug" component={loadable(() => import('./containers/PostBlog').then(c => c.default))} />
  ],
  navItem: [],
  resolver: [resolvers],
  localization: [{ ns: 'post', resources }]
});

/: slug - это слаг в блоге. когда я это делаю, ссылка "/ login" или "/ signup" переходит на страницу блога и приложение вылетает. Есть ли способ исключить эти пути из /: slug?

Это мои пользовательские маршруты

const NavLinkUsersWithI18n = translate('user')(({ t }) => (
  <NavLink to="/users" className="nav-link" activeClassName="active">
    {t('navLink.users')}
  </NavLink>
));
const NavLinkPostsWithI18n = translate('user')(({ t }) => (
  <NavLink to="/posts" className="nav-link" activeClassName="active">
    {t('navLink.posts')}
  </NavLink>
));
const NavLinkHabitsWithI18n = translate('user')(({ t }) => (
  <NavLink to="/habits" className="nav-link" activeClassName="active">
    {t('navLink.habits')}
  </NavLink>
));
const NavLinkLoginWithI18n = translate('user')(({ t }) => (
  <NavLink to="/login" className="nav-link" activeClassName="active">
    {t('navLink.signIn')}
  </NavLink>
));

export default new ClientModule({
  route: [
    <AuthRoute
      exact
      path="/profile"
      role={['user', 'admin']}
      redirect="/login"
      component={loadable(() => import('./containers/Profile').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/users"
      redirect="/profile"
      role="admin"
      component={loadable(() => import('./containers/Users').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/users/new"
      role={['admin']}
      component={loadable(() => import('./containers/UserAdd').then(c => c.default))}
    />,
    <AuthRoute
      path="/users/:id"
      redirect="/profile"
      role={['user', 'admin']}
      component={loadable(() => import('./containers/UserEdit').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/register"
      redirectOnLoggedIn
      redirect="/profile"
      component={loadable(() => import('./containers/Register').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/login"
      redirectOnLoggedIn
      redirect="/"
      component={loadable(() => import('./containers/Login').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/forgot-password"
      redirectOnLoggedIn
      redirect="/profile"
      component={loadable(() => import('./containers/ForgotPassword').then(c => c.default))}
    />,
    <AuthRoute
      exact
      path="/reset-password/:token"
      redirectOnLoggedIn
      redirect="/profile"
      component={loadable(() => import('./containers/ResetPassword').then(c => c.default))}
    />
  ],
  navItem: [],
  navItemRight: [
    <IfLoggedIn key="/habits">
      <MenuItem>
        <NavLinkHabitsWithI18n />
      </MenuItem>
    </IfLoggedIn>,
    <IfLoggedIn key="/posts" role="admin">
      <MenuItem>
        <NavLinkPostsWithI18n />
      </MenuItem>
    </IfLoggedIn>,
    <IfLoggedIn key="/users" role="admin">
      <MenuItem>
        <NavLinkUsersWithI18n />
      </MenuItem>
    </IfLoggedIn>,
    <IfLoggedIn key="/profile">
      <MenuItem>
        <NavLink to="/profile" className="nav-link" activeClassName="active">
          <ProfileName />
        </NavLink>
      </MenuItem>
    </IfLoggedIn>,
    <IfLoggedIn key="/logout">
      <MenuItem>
        <LogoutLink />
      </MenuItem>
    </IfLoggedIn>,
    <IfNotLoggedIn key="/login">
      <MenuItem>
        <NavLinkLoginWithI18n />
      </MenuItem>
    </IfNotLoggedIn>
  ],
  resolver: [resolvers],
  localization: [{ ns: 'user', resources }],
  dataRootComponent: [DataRootComponent],
  // eslint-disable-next-line react/display-name
  rootComponentFactory: [req => (req ? <CookiesProvider cookies={req.universalCookies} /> : <CookiesProvider />)]
});

Answer 1

Для других статических путей вам необходимо определить точные реквизиты. Например,

<Route exact path="/signup"

А также убедитесь, что динамический путь, такой как /:slug, появится позже.

---

Согласно вашему обновленному вопросу:

Он всегда удовлетворитна /post/:id и никогда не позволю вам перейти на /:slug. Поскольку он не имеет точных реквизитов.

Вам следует изменить порядок маршрута на /post/:id позже, после /:slug.

---

Чтобы избежать такой путаницы при маршрутизации, я предложу вамвместо этого просто определите /blog/:slug, и порядок с другими маршрутами не имеет значения.