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

Question

我的代码有两个问题：

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

第二：我的第二个导航栏有一个退出按钮，可以让我回到登陆页面。由于某种原因，我无法让它工作，因为如果我将路由添加到我的 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'

};

Answer 1

我已经解决了这两个问题！我不得不去掉 App.js 中定义的 Gitapp 路由中的“精确”这个词。所以而不是：const App = () => {&nbsp; return (&nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path='/' component={LandingPage} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path='/gitapp' component={GitApp} /> {/* Wrong! */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route component={PageNotFound} />&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; </Router>&nbsp; &nbsp; </Fragment>&nbsp; );};它应该是：const App = () => {&nbsp; return (&nbsp; &nbsp; <Fragment>&nbsp; &nbsp; &nbsp; <Router>&nbsp; &nbsp; &nbsp; &nbsp; <Switch>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route exact path='/' component={LandingPage} />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route path='/gitapp' component={GitApp} /> {/* Correct! */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Route component={PageNotFound} />&nbsp; &nbsp; &nbsp; &nbsp; </Switch>&nbsp; &nbsp; &nbsp; </Router>&nbsp; &nbsp; </Fragment>&nbsp; );};不知道为什么，但我可以重新加载二级组件而不是接收 NotFound 组件。如果有人能解释为什么精确这个词在这里有所不同，我们将不胜感激。至于我的第二个问题，我只是使用了条件渲染的重定向。因此，我的上下文 api 将更新我的全局“注销”状态并将其传递给组件，然后组件将等待它（“注销”状态）变为真，然后将我重定向到登录页面。