npm install react-router-dom -S
// 1. 导入包
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App.jsx'
// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(<App></App>, document.getElementById('app'))

这是网站的APP根组件

    <Link to="/home">首页</Link>&nbsp;&nbsp;
    <Link to="/movie/top250/10">电影</Link>&nbsp;&nbsp;
    <Link to="/about">关于</Link>
    <hr />
    {/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */}
    {/* 在 vue 中有个 router-view 的路由标签专门用来放置匹配到的路由组件的，但是在 react-router 中并没有类似于这样的标签，而是直接把 Route 标签当作的坑（占位符） */}
    {/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是一个占位符，表示将来匹配到的组件都放到这个位置， 如果想让路由规则进行精确匹配，可以为 Route添加 exact 属性，表示启用精确匹配模式 */}
    <Route path="/home" component={Home}></Route>
    <hr />
    {/* 注意：默认情况下，路由中的规则是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件 */}
    {/* 如果要匹配参数，可以在匹配规则中使用 : 修饰符，表示这个位置匹配到的是参数 */}
    <Route path="/movie/:type/:id" component={Movie} exact></Route>
    <hr />
    <Route path="/about" component={About}></Route>
  </div>
</HashRouter>

} }

<a name="Kkqrx"></a>
#### 3. components/Home.jsx  
```javascript
import React from 'react'
export default class Home extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return <div>
      Home
    </div>
  }
}

4. components/Movie.jsx

import React from 'react'
export default class Movie extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      routeParams: props.match.params
    }
  }
  render() {
    console.log(this);
    // 如果想要从路由规则中，提取匹配到的参数进行使用，可以使用 this.props.match.params.*** 来访问
    return <div>
      {/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}
      Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}
    </div>
  }
}

5. components/About.jsx

import React from 'react'
export default class About extends React.Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return <div>
      About
    </div>
  }
}

四、路由匹配规则

默认配置：

路径	location.pathname	是否匹配
/one	/one	是
/one	/one/	是
/one	/one/111	是
/one	/one/aaa/bbb	是

**

exact配置：

• exact属性为true时路径中的hash值必须和path完全一致才渲染对应的组件，如果为false则’/‘也可以匹配’/xxx’ | 路径 | location.pathname | exact | 是否匹配 | | :—- | :—- | :—- | :—- | | /one | /one/two | true | 否 | | /one | /one/two | false | 是 |

strict配置：

• strict属性主要就是匹配反斜杠，规定是否匹配末尾包含反斜杠的路径，如果strict为true，则如果path中不包含反斜杠结尾，则他也不能匹配包含反斜杠结尾的路径 | 路径 | location.pathname | strict | 是否匹配 | | :—- | :—- | :—- | :—- | | /one/ | /one | true | 否 | | /one/ | /one/ | true | 是 | | /one/ | /one/two | true | 是 |

五、Switch和Redirect

Switch

表示路由互斥，如果没有Switch，会根据路由找到所有匹配的组件显示
比如http://localhost:3000/#/user 会找到/、/user所匹配的路由(下面home没有找到是因为精确匹配了)

Redirect

没有匹配到路径的时候重定向到根路径

import { HashRouter, Route, Link, Switch,Redirect} from 'react-router-dom'
render() {
        return (
            <HashRouter>
                <Switch>
                    {/*
                    path:/ 表示访问根路径的情况下默认载入home组件
                    exact精确匹配，为了给其他组件一个机会获取到url改变
                    */}
                    <Route path='/' exact  component={Home}/>
                    <Route path='/city' component={City}/>
                    {/*
                    strict 在确定路径是否与当前URL匹配时，将考虑路径后的斜线；
                    */}
                    <Route path='/login/' strict component={Login}/>
                    <Route path='/user' component={User}/>
                    <Route path='/search/:category/' strict component={Search}/>
                    <Route path='/detail/:id' component={Detail}/>
                    {/*没有匹配到路径的时候重定向到根路径*/}
                    <Redirect to="/" />
                </Switch>
            </HashRouter>
        )
    }