react-router简易入门

2018-04-03 本文已影响0人向前冲冲的蜗牛

文章参考链接：
https://segmentfault.com/a/1190000010174260#articleHeader14
http://www.kindemh.cn/post/19
https://blog.pusher.com/getting-started-with-react-router-v4/

React Router 4 简易入门

安装

React Router 有三个包：

react-router ,
react-router-dom
react-router-native

npm安装：

npm install --save react-router-dom

路由

存在<BrowserRouter>与<HashRouter>l两种组件
<BrowserRouter>主要用来管理动态请求（推荐用BrowerRouter)
<HashRouter> 主要用于静态网站

渲染<Router>

路由器只能渲染一个元素，创建一个<App>组件来组合渲染其余的组件

import { BrowserRouter } from 'react-router-dom'
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'))

<App>

<App>可以自由组合组合
example

// this component will be rendered by our <___Router>
const App = () => (
  <div>
    <Header />
    <Main />
  </div>
)

路由（Route）

<Route>可以根据URL的路径名来进行渲染

<Route>是如何渲染的

分析：path和url匹配成功后，路由确定渲染的参数有三种

component：返回一个react组件
render:返回react element的函数，匹配成功后会调用该函数
children：

//component
<Route path='/page' component={Page} />
const extraProps = { color: 'red' }

//render
<Route path='/page' render={(props) => (
  <Page {...props} data={extraProps}/>
)}/>

//childern
<Route path='/page' children={(props) => (
  props.match
    ? <Page {...props}/>
    : <EmptyPage {...props}/>
)}/>