阵营路由器4不匹配嵌套路线

Question

我想有一个全球性的No Match路线来处理所有404。一旦登录，所有主要视图都将落入包含页眉和页脚的布局中。尽管NotFound组件应该在此布局之外进行渲染。

下面是“工作” 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上。如果我设置的应用程序的根路径exact比我能得到NOTFOUND，但失去了家庭路线

虽然使用/不使用的根exact，移动根Route的I列表底部的变化可以获得预期行为的部分工作，但并非所有工作都一致。

如果我游 “/” 我希望看到：

Some Header Thing 
Home 
Some Footer Thing 

如果我游 “/目录” 我希望看到：

Some Header Thing 
List 
Some Footer Thing 

如果我游 “/注册” 我期待看：

Register 

如果我游 “/ foobar的” 我期望看到：

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中保留“未找到”路线。