陣營路由器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中保留「未找到」路線。