Question

我希望有一个全局No Match路由来处理所有404。登录后，所有主要视图都位于包含页眉和页脚的布局中。虽然NotFound组件应该在此布局之外呈现。

这是指向＆＃34;工作＆＃34;的链接code sample

以下是代码的简化示例：

const App = () => (
  <Switch>
    <Route path="/register" component={Register} />
    <Route path="/signin" component={SignIn} />
    <Route path="/" component={Home} />
    <Route component={NotFound} />
  </Switch>
);

const Home = () => (
  <div>
    <Header />
    <main>
      <Switch>
        <Route exact path="/" component={Main} />
        <Route path="/list" component={List} />
        <Route path="/tasks" component={Tasks} />
      </Switch>
    </main>
    <Footer />
  </div>
);

上面的代码示例可以按照我的意愿渲染布局，但在非匹配的URL上呈现空布局。如果我将App根路径设置为exact，那么我可以获取NotFound但丢失Home路径

虽然在根上使用/不使用exact的变体，将根移动到Route列表的底部我可以使部分预期行为起作用，但不是全部一起工作。

如果我访问＆＃34; /＆＃34;我希望看到：

Some Header Thing
Home
Some Footer Thing

如果我访问＆＃34; / list＆＃34;我希望看到：

Some Header Thing
List
Some Footer Thing

如果我访问＆＃34; /注册＆＃34;我希望看到：

Register

如果我访问＆＃34; / foobar＆＃34;我希望看到：

Not Found

Answer 1

下面的内容将使路线正常工作，对您的代码进行相对较小的调整，而且由于我不想假设太多，我对重组事物犹豫不决。但正如您所看到的，这会导致使用“Home”组件引导所有带有页眉和页脚的部分，其中“Not Found”会捕获其余部分。然而，它确实会使很多东西变得平坦，而这些东西可能会因很多路线而变得难以处理。

const App = () => (
  <BrowserRouter>
    <Switch>
      <Route path="/register" render={() => <div>Register</div>} />
      <Route path="/signin" render={() => <div>Sign in</div>} />
      <Route path="/list" component={Home} />
      <Route path="/tasks" component={Home} />
      <Route exact path="/" component={Home} />
      <Route render={() => <div>Not Found</div>} />
    </Switch>
  </BrowserRouter>
);

const Home = () => (
  <div>
    <header>Some Header Thing</header>
    <main>
      <Switch>
        <Route path="/list" render={() => <div>List</div>} />
        <Route path="/tasks" render={() => <div>Tasks</div>} />
        <Route path="/" render={() => <div>Home</div>} />
      </Switch>
    </main>
    <footer>Some Footer Thing</footer>
  </div>
);

（另外，我刚刚意识到我使用了你作为模特提供的示例codeSandbox - 而不是你的Qs - 抱歉。）

另一种思考结构的方式是从字面上更直接和更好地描述。你写的应该首先注册并登录用户，然后在真实之后出现网站的各种路由。不要将其视为路由问题，而应将其视为props问题 - 是否存在已定义的user道具？如果是，则渲染路径的组件，如果不渲染寄存器/符号组件。您可以使用三元组来检查App中是否存在用户，例如：

const App = ({user}) => (
  <div>
    { user ? Home : Signin }
  </div>
)

其中Home将呈现现有组件的版本，而Signin会将您带入与App组件类似的组件。您也可以在App中保留“未找到”路线。

React Router 4与嵌套路由不匹配

1 个答案: