一、 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(
( <HashRouter>
<Route path='/' component={App}/>
</HashRouter>
), 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(
<header>这是头部公共部分</header>
<div>
{/*路由配置*/}
</div>
);
}
}
export default App;
4.总结
① 核心思想：router 是一个组件容器，可以装一部分公共部分，可以在剩下需要切换的部分直接进行路由配置。
② Switch：当某一路由同时符合多个路由规则会带来麻烦，当我们需要一个路由只为一匹配一个路由规则时，需要switch，switch匹配到一个后不再继续匹配后面的，精准匹配需要给route添加exact属性。
三、路由传值
1.params传值
路由配置
<Route path='/detail/:id' component={Detail}/>
跳转页面
<Link to={'/detail/2'} >XXXX</Link>
//或者
this.props.history.push("/detail/2")
获取页面
this.props.match.params.id
//注意：有可能一个组件的子组件无法通过上面的代码获取到id可以使用withRouter（ChildName）来形成高阶组件
import { withRouter} from 'react-router-dom';
export default withRouter(ChildName);
上面讲的是传一个值，当然也可以传多个值
<Route exact path="/rgb/:r/:g/:b" component={RGB} />
this.props.match.params.r
this.props.match.params.g
this.props.match.params.b
2.query传值
注意：路由配置不需要修改，传递一个对象，对象属性包含pathname 和 query ，query属性的值是要传递的对象。
跳转页面
<Link to={{ pathname: '/detail',query:{type:'sex'}}}>XXXX</Link>
//或者
this.props.history.push({pathname:'/detail',query:{type:'sex'}})
获取页面参数
this.props.location.query.sex//建议不用 刷新页面时 丢失
3.state传值--秘密传递
注意：同query相似，state传的参数不可见，query传的参数在地址栏可见；
跳转页面
<Link to={{ pathname: '/detail',state:{type:'sex'}}}>XXXX</Link>
//或者
this.props.history.push({pathname:'/detail',state:{type:'sex'}})
获取页面
this.props.location.state.sex//建议不用 刷新页面时 丢失
四、路由跳转
1.Link
<Link to="/detail/10003">详情</Link>
2.Push
this.props.history.push("/")
网友评论