React-Router v4（基础）

一、 react-router vs react-router-dom

Note: This package provides the core routing functionality for React Router, but you might not want to install it directly. If you are writing an application that will run in the browser, you should instead install react-router-dom. Similarly, if you are writing a React Native application, you should instead install react-router-native. Both of those will install react-router as a dependency.

官方文档：https://reacttraining.com/react-router/web/guides/philosophy

---

二、快速上手

1.命令行依次输入

项目构建

npm install -g create-react-app

create-react-app demo-app

cd demo-app

安装react-router-dom

npm install react-router-dom

2.入口文件路由配置(index.js)

import React from 'react';

import ReactDOM from "react-dom";

import { HashRouter as Router, Route, Link, Switch} from 'react-router-dom'

//这里使用引入的App组件

import App from './App';

ReactDOM.render(

        (

                

                

        ), document.getElementById('root')

);

3.App组件中定义路由

import React from'react';

import ReactDOM from"react-dom";

import { HashRouter as Router, Route,Link,Switch} from 'react-router-dom'

class App extends Component{

        render() {

                return(

                        

这是头部公共部分

                        

                                {/*路由配置*/}

                       

               );

        }

}

export default App;

4.总结

① 核心思想：router 是一个组件容器，可以装一部分公共部分，可以在剩下需要切换的部分直接进行路由配置。

② Switch：当某一路由同时符合多个路由规则会带来麻烦，当我们需要一个路由只为一匹配一个路由规则时，需要switch，switch匹配到一个后不再继续匹配后面的，精准匹配需要给route添加exact属性。

---

三、路由传值

1.params传值

路由配置

跳转页面

XXXX

//或者

this.props.history.push("/detail/2")

获取页面

this.props.match.params.id

//注意：有可能一个组件的子组件无法通过上面的代码获取到id可以使用withRouter（ChildName）来形成高阶组件

import { withRouter} from 'react-router-dom';

export default withRouter(ChildName);

上面讲的是传一个值，当然也可以传多个值

this.props.match.params.r

this.props.match.params.g

this.props.match.params.b

2.query传值

注意：路由配置不需要修改，传递一个对象，对象属性包含pathname 和 query ，query属性的值是要传递的对象。

跳转页面

XXXX

//或者

this.props.history.push({pathname:'/detail',query:{type:'sex'}})

获取页面参数

this.props.location.query.sex//建议不用 刷新页面时 丢失

3.state传值--秘密传递

注意：同query相似，state传的参数不可见，query传的参数在地址栏可见；

跳转页面

XXXX

//或者

this.props.history.push({pathname:'/detail',state:{type:'sex'}})

获取页面

this.props.location.state.sex//建议不用 刷新页面时 丢失

四、路由跳转

1.Link

详情

2.Push

this.props.history.push("/")