1、安装依赖
yarn add react-router-dom
2、配置路由
//App.js
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
//例子
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
import Home from './views/Home'
import About from './views/About'
class App extends Component {
render() {
return (
<div>
<Router>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
{/* exact路由的严格匹配,只有路径为/才会出来对应的路由 */}
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/about/fs" component={About}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
3、路由跳转(不传参)
//App.js
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
import Home from './views/Home'
import About from './views/About'
import Detail from './views/Detail'
class App extends Component {
render() {
return (
<div>
<Router>
<ul>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">About</Link></li>
</ul>
{/* exact路由的严格匹配,只有路径为/才会出来对应的路由 */}
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/detail" component={Detail}></Route>
</Switch>
</Router>
</div>
);
}
}
export default App;
//src/views/Home.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Button} from 'antd';
class Home extends Component {
render() {
return (
<div>
主页
<Link to="/detail">
<Button>detail</Button>
</Link>
</div>
);
}
}
export default Home;
4、路由跳转及get传值(传参)
//Home.js
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import {Button} from 'antd';
class Home extends Component {
constructor(props){
super(props);
this.state = {
id:"121521"
}
}
render() {
return (
<div>
主页
<Link to={`/detail?id=${this.state.id}`}>
<Button>detail</Button>
</Link>
</div>
);
}
}
export default Home;
借助query-string获取id
yarn add query-string
var id = queryString.parse(this.props.location.search).id;
//Detail.js
import React, { Component } from 'react';
import queryString from 'query-string'
class Detail extends Component {
render() {
return (
<div>
detail页面
</div>
);
}
componentDidMount() {
var id = this.props.location.search;
console.log(queryString.parse(id))
}
}
export default Detail;
5、事件跳转(接收参数不变)
//Home.js
import React, { Component } from 'react';
import {Button} from 'antd';
class Home extends Component {
constructor(props){
super(props);
this.state = {
id:"121521"
}
}
render() {
return (
<div>
主页
<Button onClick={this.handleToggle}>detail</Button>
</div>
);
}
handleToggle=()=>{
this.props.history.push(`/detail?id=${this.state.id}`)
}
}
export default Home;
6、动态路由
配置动态路由
//App.js
<Switch>
<Route exact path="/" component={Home}></Route>
<Route path="/about" component={About}></Route>
<Route path="/detail/:id" component={Detail}></Route>
</Switch>
跳转
//Home.js
<Button onClick={this.handleToggle}>detail</Button>
handleToggle=()=>{
this.props.history.push(`/detail/${this.state.id}`)
}
//详情页接收
//Detail.js
componentDidMount() {
console.log(this.props.match.params)
}
7、二级路由
//在About页面上挂二级路由
components(Small.js,Large.js)
//About.js
//用到哪个引哪个
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams
} from "react-router-dom";
//两种方式,第一种component后不允许有空格(使用component方法,route标签不能有空格)
<Switch>
<Route path="/about/small" component={Small}></Route>
<Route path="/about/large">
<Large/>
</Route>
</Switch>
8、路由重定向
//配置Redirect
import {
BrowserRouter as Router,
Switch,
Route,
Link,
useRouteMatch,
useParams,
Redirect
} from "react-router-dom";
<Switch>
...
<Redirect from="/about" to="/about/small" />
</Switch>