像第一个 URL 段一样绑定 slug

Question

我正在开发使用 react-router-dom 的反应应用程序。我的应用程序行为异常。该应用程序没有主页。我们可以使用“slug”进入应用程序。例如：http://siteExample.net/my-subsite。如果 my-subsite 存在于我们的数据库中，我们需要处理这个 slug。 我的路线代码 sn-p：

const App = ({ isAuth, onSetSlug, slug}) => {

  useEffect(() => {
    onSetSlug(window.location.pathname.split('/')[1])
  }, [])

  return (
    <Router>
      <div className="App">
        <Suspense fallback={<Loading />}>
          <MainModal />
          <ScrollToTop>
            {!isAuth ? (
              <Switch>
                <Route path={'/:slug'} exact component={lazy(() => import('./containers/notAuth/home'))} />
                <ContentWrapper
                  container
                  component="main"
                  adaptSidebar={5}
                  adaptContent={7}
                >
                  <Switch>
                    <Route path={'/:slug/login'} exact component={lazy( () => import('./containers/notAuth/login'))} />
                    <Route path={'/:slug/signup'} exact component={lazy(() => import('./containers/notAuth/signup'))} />
                    <Redirect to={'/:slug'} />
                  </Switch>
                </ContentWrapper>
                <Redirect to={'/:slug'} />
              </Switch>
            </ScrollToTop>
          </Suspense>
        </div>
       </Router>
)}

例如，:slug/login 无法替代 my-subsite/login 的问题。顺便说一下，它仅适用于我的本地计算机。当我将它发布到远程主机时，它不能完全工作。

Answer 1

删除外部/根路由上的 exact 属性，因为它必然会排除匹配的任何子路由。

<Switch>
  <Route
    path={'/:slug'} // <-- want this path prefix to match
    component={lazy(() => import('./containers/notAuth/home'))}
  />
    <ContentWrapper
      container
      component="main"
      adaptSidebar={5}
      adaptContent={7}
    >
      <Switch>
        <Route
          path={'/:slug/login'}
          exact
          component={lazy( () => import('./containers/notAuth/login'))}
        />
        <Route
          path={'/:slug/signup'}
          exact
          component={lazy(() => import('./containers/notAuth/signup'))}
        />
        <Redirect to={'/:slug'} />
      </Switch>
    </ContentWrapper>
  <Redirect to={'/:slug'} />
</Switch>