0
我正在關注在線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>
但它沒有工作。兒童組件應該如何包裝?
對不起,但使用此代碼,我無法渲染比「/」路徑更不重要的字符。即使我使用相同的組件(用於調試),我也會在瀏覽器中收到「未找到」字符串 –
這只是一個如何嵌套路由的示例。如果你只有一級路線(比如「/」,「/ user」等),你不需要像這樣定義路線,你可以保持它平坦。但是如果你開始擁有像「/ user/create」這樣的嵌套路由,那麼你可以使用這個例子。 – Shota