react-router IndexRoute废弃

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
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。