时间戳

首页 > 解决方案 > 反应排除路线

reactjs - 反应排除路线

问题描述

我正在向我的反应应用程序添加一个博客，我必须使用根目录中的 slug，例如

  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 是博客文章的 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 />)]
});

标签： reactjsreact-router

解决方案

对于其他静态路径，您需要定义确切的道具。例如。

<Route exact path="/signup"

并确保/:slug稍后出现动态路径。

根据您更新的问题：

它会永远满足/post/:id你，永远不会让你去/:slug。因为它没有确切的道具。

/post/:id您应该在之后重新排序路线/:slug。

为了避免这种路由混淆，我建议您简单地定义/blog/:slug，而与其他路由的顺序无关紧要。

推荐阅读