使用React路由器的嵌套組件

我正在關注在線React教程。在我下載React Router（和react-router-dom）時獲得了React Router 4時使用的教程React Router 3。本教程中的代碼如下所示。使用React路由器的嵌套組件

import React from "react"; 
import {render} from "react-dom"; 
import {Router, Route, browserHistory} from 'react-router' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <Router history={browserHistory}> 
       <Route path={"/"} component={Root}> 
        <Route path={"user"} component={User}/> 
        <Route path={"home"} component={Home}/> 
       </Route> 
      </Router> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app'));

我試圖重寫代碼一起工作做出反應路由器4這樣的：

import React from "react"; 
import {render} from "react-dom"; 
import {Switch, BrowserRouter, Route} from 'react-router-dom' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Switch> 
        <Route path="/" component={Root}> 
         <Route path="/user" component={User}/> 
         <Route path="/home" component={Home}/> 
        </Route> 
       </Switch> 
      </BrowserRouter> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app'));

這給了我一個錯誤：

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored

我已經試過包裹子組件<Switch>和<Root>但它沒有工作。兒童組件應該如何包裝？

來源

2017-06-21 g3blv

在React Router 4中，您不再嵌套路由。在你的情況你可以做的是把你的路線在你的子組件，如：

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Route path="/" component={Root} /> 
      </BrowserRouter> 
     ); 
    } 
} 

class Root extends React.Component { 
    render() { 
     return (
      <div> 
       <Route path="/user" component={User}/> 
       <Route path="/home" component={Home}/> 
      </div> 
     ); 
    } 
}

另外，我不認爲你需要在這裏使用Switch，因爲它只會匹配一個第一個孩子航線而且你的情況似乎並不需要。

來源

2017-06-21 11:51:26 Shota

對不起，但使用此代碼，我無法渲染比「/」路徑更不重要的字符。即使我使用相同的組件（用於調試），我也會在瀏覽器中收到「未找到」字符串 –

這只是一個如何嵌套路由的示例。如果你只有一級路線（比如「/」，「/ user」等），你不需要像這樣定義路線，你可以保持它平坦。但是如果你開始擁有像「/ user/create」這樣的嵌套路由，那麼你可以使用這個例子。 – Shota

使用React路由器的嵌套組件

回答

相關問題