React Router v4與交換機嵌套的路由

試圖執行以下操作，但它不起作用。React Router v4與交換機嵌套的路由

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <App> 
      <Route exact path="/" component={HomePage} /> 
      <Route path="/user" component={UserPage} /> 
     </App> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
)

正如文檔所述，Switch元素中只允許使用Route和Redirect元素。如何在沒有在App中明確包裝HomePage和UserPage或讓應用程序包裝錯誤頁面的情況下如何使其工作？

來源

2017-05-07 Okinawa Terminal

是什麼阻止你與組件包裹？ –

App組件包含標題，導航欄和路徑中的任何內容。我不希望標題和導航欄在404頁面上。 –

然後我會使用來顯示你的應用程序部分，並在應用程序內部，你可以做主頁和用戶頁面之間的路由。這是做這件事的v4方法 –

雖然我已經開始開發一個「通用應用程序做出反應」，其中第一個頁面加載與服務器端渲染完成後，我遇到了類似的問題，因爲陣營，路由器剛剛更新到4.0。你應該考慮重組你的應用程序的東西下面給出：

ReactDOM.render(
    <Router> 
    <div className="route-wrapper"> 
     <Switch> 
     <Route path="/" component={App} /> 
     <Route component={Err404} /> 
     </Switch> 
    </div> 
    </Router>, 
    document.getElementById('main') 
)

當應用程序組件被重構如下：

class App extends React.Component { 
    render() { 
    return <div> 
     <Switch> 
     <Route exact path="/" component={HomePage} /> 
     <Route exact path="/user" component={UserPage} /> 
     </Switch> 
    </div>; 
    } 
}

來源

2017-06-25 08:04:01

關於這個例子：甚至有可能達到Err404組件嗎？第一個Route匹配所有內容並加載App組件，在這種情況下將加載Err404組件？它不檢測在隨後的交換機中是否找不到匹配，是嗎？ – FelixZett

React Router v4與交換機嵌套的路由

回答

相關問題