通过函数跳转
import React from 'react';
import {HashRouter, Route, Switch, hashHistory} from 'react-router-dom';
import Home from '../home';
import Detail from '../detail';
<HashRouter history={hashHistory}>
const BasicRoute = () => (
<HashRouter>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/detail" component={Detail}/>
</Switch>
</HashRouter>
);
export default BasicRoute;
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<a href='#/detail'>去detail</a>
<button onClick={() => this.props.history.push('detail')}>通过函数跳转</button>
</div>
)
}
}
在a标签下面添加一个按钮并加上onClick事件,通过this.props.history.push这个函数跳转到detail页面。在路由组件中加入的代码就是将history这个对象注册到组件的props中去,然后就可以在子组件中通过props调用history的push方法跳转页面。
url传参
在router.js中,修改如下:
...
<Route exact path="/detail/:id" component={Detail}/>
...
然后修改detail.js,使用this.props.match.params获取url传过来的参数:
...
componentDidMount() {
console.log(this.props.match.params);
}
...
react-router-dom就是通过“/:”去匹配url传递的参数。
隐式传参
此外还可以通过push函数隐式传参。
修改home.js代码如下:
import React from 'react';
export default class Home extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<a href='#/detail/3'>去detail</a>
<button onClick={() => this.props.history.push({
pathname: '/detail',
state: {
id: 3
}
})}>通过函数跳转</button>
</div>
)
}
}
在detail.js中,就可以使用this.props.history.location.state获取home传过来的参数:
componentDidMount() {
//console.log(this.props.match.params);
console.log(this.props.history.location.state);
}
其他函数
-
replace
有些场景下,重复使用push或a标签跳转会产生死循环,为了避免这种情况出现,react-router-dom提供了replace。在可能会出现死循环的地方使用replace来跳转:
this.props.history.replace('/detail');
-
goBack
场景中需要返回上级页面的时候使用:
this.props.history.goBack();
嵌套路由
-
定义父级组件MainLayout
import React from 'react'; import './MainLayout.scss'; const { Header, Sider, Content } = Layout; export default class MainLayout extends React.Component { render() { return ( <div className='main-layout'> 父组件 </div> ); } }
-
定义子组件Home
import React, {useState} from 'react'; import {Modal, Select} from "antd"; import {connect} from 'react-redux'; import {addCount} from '../../servers/home'; function Home(props) { const [visible, setVisible] = useState(false); const {countNum: {count}, dispatch} = props; return ( <div> 子组件 </div> ) } export default Home;
-
添加进路由router.js,并且关联父子关系
import React from 'react'; import {HashRouter, Route, Switch} from "react-router-dom"; import Home from '../pages/Home/Home'; import MainLayout from '../layout/MainLayout'; const BasicRouter = () => ( <HashRouter> <Switch> <Route path="/index" component={ <MainLayout> <Route exact path="/" component={Home}/> <Route exact path="/index" component={Home}/> <Route path="/index/home" component={Home}/> </MainLayout> }/> </Switch> </HashRouter> ); export default BasicRouter;
在MainLayout中,修改如下代码:
import React from 'react';
import './MainLayout.scss';
const { Header, Sider, Content } = Layout;
export default class MainLayout extends React.Component {
render() {
return (
<div className='main-layout'>
{this.props.children}
</div>
);
}
}