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

Question

我的代码有两个问题：

第一：我的整个应用程序似乎工作正常，当我第一次加载我的网络应用程序时，我可以访问我的所有路线。我的应用程序由一个带有导航栏的登录页面组成，该导航栏有一个登录按钮，可将我直接带到我的应用程序的主页（尚未添加身份验证）。此主页的导航栏与登录页面上的导航栏不同。导航栏项是（home、about 和 LandingPage）。我的 App.js 有到着陆页组件、主页（即 Gitapp 组件）和 PageNotFound 组件的路由。 Gitapp 组件包含到关于页面和其他组件的路由。如果我在 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'
};

Answer 1

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

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 组件。如果有人能解释为什么 exact 一词在这里有所不同，将不胜感激。

至于我的第二个问题，我只是使用了带条件渲染的重定向。所以我的上下文 api 将更新我的全局 'logout' 状态并将其传递给组件，然后组件将等待它（'logout' 状态）变为 true 然后将我重定向到着陆页。

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

Nested react routes with different page layouts

javascript

reactjs

react-router-v4