2017-05-07 71 views
1

試圖執行以下操作,但它不起作用。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或讓應用程序包裝錯誤頁面的情況下如何使其工作?

+0

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

+0

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

+0

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

回答

6

雖然我已經開始開發一個「通用應用程序做出反應」,其中第一個頁面加載與服務器端渲染完成後,我遇到了類似的問題,因爲陣營,路由器剛剛更新到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>; 
    } 
} 
+0

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