1、安装依赖

  1. yarn add react-router-dom

2、配置路由

  1. //App.js
  2. import {
  3. BrowserRouter as Router,
  4. Switch,
  5. Route,
  6. Link,
  7. useRouteMatch,
  8. useParams
  9. } from "react-router-dom";
  1. //例子
  2. import React, { Component } from 'react';
  3. import {
  4. BrowserRouter as Router,
  5. Switch,
  6. Route,
  7. Link,
  8. useRouteMatch,
  9. useParams
  10. } from "react-router-dom";
  11. import Home from './views/Home'
  12. import About from './views/About'
  13. class App extends Component {
  14. render() {
  15. return (
  16. <div>
  17. <Router>
  18. <ul>
  19. <li><Link to="/">首页</Link></li>
  20. <li><Link to="/about">About</Link></li>
  21. </ul>
  22. {/* exact路由的严格匹配,只有路径为/才会出来对应的路由 */}
  23. <Switch>
  24. <Route exact path="/" component={Home}></Route>
  25. <Route path="/about" component={About}></Route>
  26. <Route path="/about/fs" component={About}></Route>
  27. </Switch>
  28. </Router>
  29. </div>
  30. );
  31. }
  32. }
  33. export default App;

3、路由跳转(不传参)

  1. //App.js
  2. import React, { Component } from 'react';
  3. import {
  4. BrowserRouter as Router,
  5. Switch,
  6. Route,
  7. Link,
  8. useRouteMatch,
  9. useParams
  10. } from "react-router-dom";
  11. import Home from './views/Home'
  12. import About from './views/About'
  13. import Detail from './views/Detail'
  14. class App extends Component {
  15. render() {
  16. return (
  17. <div>
  18. <Router>
  19. <ul>
  20. <li><Link to="/">首页</Link></li>
  21. <li><Link to="/about">About</Link></li>
  22. </ul>
  23. {/* exact路由的严格匹配,只有路径为/才会出来对应的路由 */}
  24. <Switch>
  25. <Route exact path="/" component={Home}></Route>
  26. <Route path="/about" component={About}></Route>
  27. <Route path="/detail" component={Detail}></Route>
  28. </Switch>
  29. </Router>
  30. </div>
  31. );
  32. }
  33. }
  34. export default App;
  1. //src/views/Home.js
  2. import React, { Component } from 'react';
  3. import {Link} from 'react-router-dom';
  4. import {Button} from 'antd';
  5. class Home extends Component {
  6. render() {
  7. return (
  8. <div>
  9. 主页
  10. <Link to="/detail">
  11. <Button>detail</Button>
  12. </Link>
  13. </div>
  14. );
  15. }
  16. }
  17. export default Home;

4、路由跳转及get传值(传参)

  1. //Home.js
  2. import React, { Component } from 'react';
  3. import {Link} from 'react-router-dom';
  4. import {Button} from 'antd';
  5. class Home extends Component {
  6. constructor(props){
  7. super(props);
  8. this.state = {
  9. id:"121521"
  10. }
  11. }
  12. render() {
  13. return (
  14. <div>
  15. 主页
  16. <Link to={`/detail?id=${this.state.id}`}>
  17. <Button>detail</Button>
  18. </Link>
  19. </div>
  20. );
  21. }
  22. }
  23. export default Home;

借助query-string获取id

  1. yarn add query-string
  1. var id = queryString.parse(this.props.location.search).id;
  1. //Detail.js
  2. import React, { Component } from 'react';
  3. import queryString from 'query-string'
  4. class Detail extends Component {
  5. render() {
  6. return (
  7. <div>
  8. detail页面
  9. </div>
  10. );
  11. }
  12. componentDidMount() {
  13. var id = this.props.location.search;
  14. console.log(queryString.parse(id))
  15. }
  16. }
  17. export default Detail;

5、事件跳转(接收参数不变)

  1. //Home.js
  2. import React, { Component } from 'react';
  3. import {Button} from 'antd';
  4. class Home extends Component {
  5. constructor(props){
  6. super(props);
  7. this.state = {
  8. id:"121521"
  9. }
  10. }
  11. render() {
  12. return (
  13. <div>
  14. 主页
  15. <Button onClick={this.handleToggle}>detail</Button>
  16. </div>
  17. );
  18. }
  19. handleToggle=()=>{
  20. this.props.history.push(`/detail?id=${this.state.id}`)
  21. }
  22. }
  23. export default Home;

6、动态路由

  1. 配置动态路由
  2. //App.js
  3. <Switch>
  4. <Route exact path="/" component={Home}></Route>
  5. <Route path="/about" component={About}></Route>
  6. <Route path="/detail/:id" component={Detail}></Route>
  7. </Switch>
  1. 跳转
  2. //Home.js
  3. <Button onClick={this.handleToggle}>detail</Button>
  4. handleToggle=()=>{
  5. this.props.history.push(`/detail/${this.state.id}`)
  6. }
  1. //详情页接收
  2. //Detail.js
  3. componentDidMount() {
  4. console.log(this.props.match.params)
  5. }

7、二级路由

  1. //在About页面上挂二级路由
  2. components(Small.js,Large.js)
  3. //About.js
  4. //用到哪个引哪个
  5. import {
  6. BrowserRouter as Router,
  7. Switch,
  8. Route,
  9. Link,
  10. useRouteMatch,
  11. useParams
  12. } from "react-router-dom";
  13. //两种方式,第一种component后不允许有空格(使用component方法,route标签不能有空格)
  14. <Switch>
  15. <Route path="/about/small" component={Small}></Route>
  16. <Route path="/about/large">
  17. <Large/>
  18. </Route>
  19. </Switch>

8、路由重定向

  1. //配置Redirect
  2. import {
  3. BrowserRouter as Router,
  4. Switch,
  5. Route,
  6. Link,
  7. useRouteMatch,
  8. useParams,
  9. Redirect
  10. } from "react-router-dom";
  11. <Switch>
  12. ...
  13. <Redirect from="/about" to="/about/small" />
  14. </Switch>