Question

我正在将博客添加到我的react应用中，我必须使用根目录中的子弹，例如

  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，而与其他路由的顺序无关紧要。

反应排除路线

1 个答案: