react的初期之react-router

          哈喽~首先由于react-router出了4.0版本,导致新旧不能混用,所以做下简单的新版本归纳，首先进入项目目录，使用npm安装react-router-dom：

npm install react-router-dom --save-dev

• 1/ 首先先引入react-router-dom;以下代码第四行,含义是把BrowserRouter重命名为Router,Route,Link. from这个不用说明吧

import React from 'react';
import ReactDOM from 'react-dom';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route, Link} from 'react-router-dom';

• 2/其次创建一个箭头函数返回值赋给BasicExample;Route在此的作用是把调用到组件component={Home}的内容给path对应的地址,如Link Home为例,组件Home的内容给path="/",该地址对应to="/",so component={Home}的内容给Link Home.

const BasicExample = () => (  
  <Router>
    <div>
      <ul>
        //点击home, 然后to跳转
        <li><Link to="/">Home</Link></li>
        <li><Link to="/topics">Topics</Link></li>
      </ul>

      <hr/>
       //path是于to的地址对应,要一致
      <Route exact path="/" component={Home}/>
      <Route path="/topics" component={Topics}/>
    </div>
  </Router>
)
  class Home extends React.Component{
     render(){
       return(
        <div>
            <h2>monica</h2>
         </div>
       )
       
     }

• 3/component={Topics}对应的组件代码在下面,由于有match这个新属性,所以单独拿出来说明, props.match 包含4个属性：match.params、match.isExact、match.path、match.url,是组件的属性

const Topics = ({ match }) => (  
  <div>
    <h2>Topics</h2>
    <ul>
      <li>
        <Link to={`${match.url}/rendering`}>
          Rendering with React
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/components`}>
          Components
        </Link>
      </li>
      <li>
        <Link to={`${match.url}/prop-v-state`}>
          Props v. State
        </Link>
      </li>
    </ul>

    //path={match.url}对应的3个Link的内容自动渲染为Please select a topic
    <Route exact path={match.url} render={() => (
      <h3>Please select a topic.</h3>
    )}/>

   // path={`${match.url}/:topicId`}把to内容里/指定的内容输出
    <Route path={`${match.url}/:topicId`} component={Topic}/>
  </div>
)


   //
  const Topic = ({ match }) => (  
      <div>
        <h3>{match.params.topicId}</h3>
      </div>
)

//把BasicExample的内容放在id为root的<div>里
ReactDOM.render(<BasicExample/>, document.getElementById('root'));

• 4/调试结果: