陣營路由器4 - 隱藏導航的「/」路線

Question

當我有下面的代碼，這樣的進口：

import { 
    BrowserRouter as Router, 
    Switch, 
    Route, 
    Link 
} from 'react-router-dom' 

import { Comics } from './Comics'; 
import { Books } from './Books'; 
import { Projects } from './Projects'; 
import { Navigation } from './Navigation'; 

function App() { 
return (
    <Router> 
    <div className="App"> 
     <Navigation loggedInUser={loggedInUser} /> 
     <Route path="/" exact component={Home} /> 

     <Switch>  
     <Route path= "/comics" component={Comics} /> 
     <Route path="/books" component={Books}/> 
     <Route path="/projects" component={Projects} /> 
     </Switch> 
    </div> 
    </Router> 
) 
} 

如何隱藏導航當我在「/」路線？我可以在每條路線上渲染導航，但我不認爲這是一個好主意的表現？

Answer 1

Path參數來路由理解與path-to-regexp兼容任何正則表達式，所以你可以選擇呈現導航組件時，纔會有路徑至少一個字符這樣

<Route path="/(.+)" render={(() => 
    <Navigation loggedInUser={loggedInUser} /> 
)}/>