react路由

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>