具有不同页面布局的嵌套反应路线答案

【问题标题】：Nested react routes with different page layouts具有不同页面布局的嵌套反应路线
【发布时间】：2019-09-12 21:55:20
【问题描述】：

我的代码有两个问题：

第一名：我的整个应用程序似乎工作正常，当我第一次加载我的网络应用程序时，我可以访问我的所有路线。我的应用程序包含一个带有导航栏的登录页面，该导航栏有一个登录按钮，可将我直接带到应用程序的主页（尚未添加身份验证）。此主页的导航栏与登录页面上的导航栏不同。导航栏项目是（home、about 和 LandingPage）。我的 App.js 具有到登录页面组件、作为 Gitapp 组件的主页和一个 PageNotFound 组件的路由。 Gitapp 组件包含到 about 页面和其他组件的路由。如果我碰巧在 App.js 上的一个路由（一级路由）上重新加载页面，它会重新加载正常。但是，如果我在我的 Gitapp 组件上存在的路由（二级路由）上，例如关于页面的路由并且我重新加载页面，我会得到 PageNotFound 组件。

第二个：我的第二个导航栏有一个注销按钮，可以让我回到登录页面。由于某种原因，我无法让它工作，因为如果我在 Gitapp 组件中添加到登录页面的路由，React 将尝试在主页下方显示登录页面。

这是 App.js：

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/gitapp' component={GitApp} />
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

这是 LandingPage.js：

const LandingPage = () => {
  return (
    <div>
      <NavbarLanding />
      <SideNavBar />
      <LandingSection1 />
      <LandingSection2 />
      <LandingSection3 />

      <Route exact path='/gitapp' component={GitApp} />
    </div>
  );
};

这是 Gitapp.js：

const GitApp = ({ match }) => {
  return (
    <GithubState>
      <Router>
        <div style={containerStyling}>
          <Navbar />
          <Switch>
            <Route exact path={match.url} component={Home} />
            <Route
              exact
              path={`${match.url}/user/:login`}
              component={UserProfile}
            />
            <Route exact path={`${match.url}/about`} component={About} />
          </Switch>
          <Footer />
        </div>
      </Router>
    </GithubState>
  );
};

const containerStyling = {
  minHeight: '100vh',
  overflow: 'hidden',
  display: 'block',
  position: 'relative',
  paddingBottom: '70px'
};

【问题讨论】：

当你已经在 app.js 中建立 GitApp 路由时，为什么还要在登陆时声明它？
除非我这样做，否则它不起作用。我想可能是因为我的 Navbar 组件包含指向在我的 Gitapp 组件中定义的路由的链接，除非该路由与 Navbar 在同一个父组件中定义，否则它将无法工作。
澄清一下，忽略重新加载的问题，除非登陆组件中存在 Gitapp 路由，否则我的登陆页面不会将我带到我的 Gitapp 组件。

标签： javascript reactjs react-router-v4

【解决方案1】：

我已经解决了这两个问题！我不得不去掉 App.js 中定义的 Gitapp 路由中的精确一词。所以而不是：

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route exact path='/gitapp' component={GitApp} /> {/* Wrong! */}
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

应该是：

const App = () => {
  return (
    <Fragment>
      <Router>
        <Switch>
          <Route exact path='/' component={LandingPage} />
          <Route path='/gitapp' component={GitApp} /> {/* Correct! */}
          <Route component={PageNotFound} />
        </Switch>
      </Router>
    </Fragment>
  );
};

不知道具体原因，但我可以重新加载二级组件，而不是接收 NotFound 组件。如果有人能解释为什么精确这个词在这里有所不同，将不胜感激。

至于我的第二个问题，我只是使用了带有条件渲染的重定向。所以我的上下文 api 将更新我的全局“注销”状态并将其传递给组件，然后等待它（“注销”状态）变为真，然后将我重定向到登录页面。

【讨论】：