react-router v4+版本 IndexRoute已经去掉了,但也有替换的属性
我们用 v3 和 v4 各写一个简单的两页应用来对比它们二者 ,下面例子中的两个路由分别指代 home 页 和 user 页:
以下是 v3 版本:
import { Router, Route, IndexRoute } from 'react-router'
const PrimaryLayout = props => (
<div className="primary-layout">
<header>
Our React Router 3 App
</header>
<main>
{props.children}
</main>
</div>
)
const HomePage = () => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<Router history={browserHistory}>
<Route path="/" component={PrimaryLayout}>
<IndexRoute component={HomePage} />
<Route path="/users" component={UsersPage} />
</Route>
</Router>
)
render(<App />, document.getElementById('root'))
以下 v3 中的概念在 v4 中不再完全准确了:
- 路由集中在一处;
- 布局和页面的层叠由层叠的
<Route>
组件控制; - 布局和页面组件是路由的一部分;
React Router 4 不再提倡中心化路由。取之的是路由存在于布局和 UI 之间。以下是在 v4 中的实现:
import { BrowserRouter, Route } from 'react-router-dom'
const PrimaryLayout = () => (
<div className="primary-layout">
<header>
Our React Router 4 App
</header>
<main>
<Route path="/" exact component={HomePage} />
<Route path="/users" component={UsersPage} />
</main>
</div>
)
const HomePage =() => <div>Home Page</div>
const UsersPage = () => <div>Users Page</div>
const App = () => (
<BrowserRouter>
<PrimaryLayout />
</BrowserRouter>
)
render(<App />, document.getElementById('root'))
作者:zhangwang
链接:https://www.jianshu.com/p/a118a55edcbf
来源:简书
简书著作权归作者所有,任何形式的转载都请联系作者获得授权并注明出处。