安装
npm install react-router-dom --save-dev
使用路由前的配置
- 在index.js 文件中 根组件中加入路由
import { HashRouter, Route } from 'react-router-dom'
// 根组件
const Root = () => (
<HashRouter basename="/">
<Route path={`/`} component={App} />
</HashRouter>
)
- 新建两个组件
分别为WarnMes1和WarnMes2
export default class WarnMes1 extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidUpdate() {
}
componentDidMount() {
}
render() {
return (
<div className="WarnMes">
WarnMes1
</div>
)
}
}
export default class WarnMes2 extends Component {
constructor(props) {
super(props);
this.state = {
}
}
componentDidUpdate() {
}
componentDidMount() {
}
render() {
return (
<div className="WarnMes">
WarnMes2
</div>
)
}
}
- 配置路由 可以在App.js中配置，也可以单独新建一个js配置，这里比较简单就直接在App.js中配置
import WarnMes1 from './Pages/WarnMes1'
import WarnMes2 from './Pages/WarnMes2' // 引入对应的组件
...
// 列表页
class App extends Component {
render() {
const {match } = this.props
const parentPath = match.path
return(
<Fragment>
<Switch>
{/* <Route exact path={`${parentPath}/`} component={NavigateMonitor} /> */}
<Route path={`${parentPath}WarnMes1`} component={WarnMes1} ></Route>
<Route path={`${parentPath}WarnMes2`} component={WarnMes2} ></Route>
</Switch>
</Fragment>
)
}
}
配置完后，就可以直接访问页面了。
路由跳转的方式
a标签跳转
import React from 'react';
export default class WarnMes1 extends React.Component {
render() {
return (
<div>
<a href='#/WarnMes2'>去WarnMes2</a>
</div>
)
}
}
通过router提供的history.push跳转
在使用方法之前要先使用router提供的withRouter方法，在暴露路由组件的地方，用withRouter包起来
import { Switch, Route, withRouter } from 'react-router-dom'
class App extends Component {
...
}
export default withRouter(App);
// 这样在路由配置的界面就可以在props中调用history.push方法，实现跳转
this.props.history.push(url); // url为要跳转的链接
注意
如果有子组件没有写在路由中，也要使用路由提供的方法，可以使用@（装饰器，详见这篇文章）引入withRouter，代码如下：
import { withRouter } from 'react-router-dom' // 引入withRouter
@withRouter // 使用装饰器
class Forback extends Component {
constructor(props) {
super(props);
this.state = {
}
}
pathRepalce() {
const {url} = this.props;
if (url === 'null') {
} else {
this.props.history.push(url);
};
}
render() {
// const {mes} = this.state;
return (
<div>
<div className="bottomButton">
<Icon type="left" size={'lg'} onClick={() => this.pathRepalce()}/>
<span className="right"><Icon type="right" size={'lg'} /></span>
</div>
</div>
)
}
}
link 方法跳转
import { Link } from 'react-router'
export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})
// Link组件最终会渲染为 HTML 标签 a，只是对比a,Link组件避免了不必要的重渲染，从而减少DOM性能消耗。所以对比a尽量使用link吧。
url传参
直接在路由界面中url中传参
...
<Route path={`${parentPath}WarnMes1:id`} component={WarnMes1} ></Route> // 有默认
...
使用this.props.match.params获取url传过来的参数：
...
componentDidMount() {
console.log(this.props.match.params);
}
...
这种方法用的很少
隐式传参（使用push函数）
this.props.history.push({
pathname: url,
query: {
historyData: historyData,
val: searchVal
}
});
在跳转到的界面可以直接获取到值
...
componentDidMount() {
//console.log(this.props.match.params);
console.log(this.props.history.location.state);
}
...
react路由的5种模式
-
BrowserRouter：浏览器的路由方式，也就是在开发中最常使用的路由方式 此模式是最常用的模式，但是在打包后，打开会发现访问不了页面，可以通过配置nginx解决或者后台配置代理
-
HashRouter：在路径前加入#号成为一个哈希值，Hash模式的好处是，再也不会因为我们刷新而找不到我们的对应路径，但是链接上面会有#/，不好看，实际开发中用这种模式的也少
// 在根组件中 项目中最外面的index.js
import { BrowserRouter, HashRouter， Route } from 'react-router-dom'
// 根组件
const Root = () => (
<Provider {...Store}>
<BrowserRouter basename="/"> // 这里换成HashRouter 就是HashRouter模式
<Route path={`/`} component={App} />
</BrowserRouter>
</Provider>
)
-
MemoryRouter：不存储history，所有路由过程保存在内存里，不能进行前进后退，因为地址栏没有发生任何变化
-
NativeRouter：经常配合ReactNative使用，多用于移动端
-
StaticRouter：设置静态路由，需要和后台服务器配合设置，比如设置服务端渲染时使用
