react-router 的配置及使用一、路由基本配置二、路由传值三、路由嵌套四、路由重定向五、路由回退、地址相关六、Prompt 对话框七、路由添加过渡、动画

75 阅读 0 评论 50 点赞

我是靠谱客的博主背后流沙，最近开发中收集的这篇文章主要介绍react-router 的配置及使用一、路由基本配置二、路由传值三、路由嵌套四、路由重定向五、路由回退、地址相关六、Prompt 对话框七、路由添加过渡、动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

官方文档：https://reactrouter.com/web/example/basic

一、路由基本配置

安装路由：

cnpm install --save-dev react-router-dom

引入路由：

import { BrowserRouter as Router, Route, Switch, Link, Prompt, useParams, useRouteMatch, Redirect, useHistory, useLocation } from 'react-router-dom'

路由配置：

function App() {
  return (
    <div className="App">
      <Router>
        {/* 路由的入口 */}
        <ul>
          <li> <Link to="/">home</Link></li>
          <li> <Link to="/cart">cart</Link></li>
          <li> <Link to="/my">my</Link></li>
        </ul>
        
        {/* 路由的出口 */}
        <Switch>
          {/* <Route exact path="/" component={Home}></Route>
          <Route path="/cart" component={Cart}></Route>
          <Route path="/my" component={My}></Route> */}
          
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/cart">
            <Cart />
          </Route>
          <Route path="/my">
            <My />
          </Route>
        </Switch>
      </Router>
    </div>
  );
}

exact 可以使路由的匹配更严格一些，防止默认显示第一条路由。

二、路由传值

1、动态传值

（1）在路由路径后直接定义参数 /:id：

<Route path="/params/:id">
  <Params></Params>
</Route>

（2）传值，在路径后直接传值：

<Link to="/params/10086">params</Link>

（3）子组件里边接收传过来的值：

如果是函数组件，可以使用 useParams 来接收（引入路由时还要引入useParams）。

function Params() {
  let { id } = useParams();   //使用结构赋值
  return (
    <div className="home">
      动态传值：{id}    //绑定值
    </div>
  )
}

注意：函数组件因为不存在状态和生命周期，它里面可以使用react-hook，如：useState、 useEffect 等；
类组件里边不能使用Hooks。

在类组件中获取动态传值，可以使用this.props.match.params来接收：

    componentDidMount() {
        //在类组件中获取动态传值   
        //使用this.props.match.params
        console.log(this.props.match.params);
    }

注意使用该方法来接收动态传值时，路由配置要写成如下样式：

<Route path="/cart" component={Cart}></Route>

2、get传值

（1）直接路径后边写传值

（2）接收get传值

使用url解析：

引入url模块：

import url from ‘url’

获取get传值：

    componentDidMount() {
        console.log(url.parse(this.props.location.search,true).query);   {id:10086}
        console.log(this.props.location.search);   //?id=10086
    }

函数组件，可以使用URLSearchParams来获取get传值：

  let query = new URLSearchParams(useLocation().search);
  console.log(query.get('number'));

三、路由嵌套

哪个子组件需要子路由，哪个子组件再来一套<Router></Router>；

注意：只有函数组件才可以使用useRouteMatch()获取父级路由的path和url

子组件：

function Cart() {
  //使用`useRouteMatch()`获取父级路由的`path`和`url`
  let {path,url} =useRouteMatch();
  return (
    <div className="home">
      购物车
      <Router>
        <ul>
          <li><Link to={`${url}/one`}>one</Link></li>
          <li><Link to={`${url}/two`}>two</Link></li>
        </ul>
        <Switch>
          <Route exact path={`${path}/one`}>
            <One />
          </Route>
          <Route path={`${path}/two`}>
            <Two />
          </Route>
        </Switch>
      </Router>
    </div>
  )
}

如果子组件是类组件，如何获取url和path？
在this.props.match上获取。

let {path,url} =this.props.match;

四、路由重定向

直接使用Redirect 。
如果找不到路径，直接重定向到"/"：

<Switch>
  <Route exact path="/">
    <Home />
  </Route>
  <Route path="/cart">
    <Cart />
  </Route>
  <Redirect to="/"></Redirect>
</Switch>

五、路由回退、地址相关

函数组件里边使用useHistory() 和 useLocation() 钩子函数；
类组件里边使用this.props.history 和 this.props.location；

六、Prompt 对话框

可以用来做切换路由确认，确认是否跳转。添加在子组件里边。

function Home() {
  let [issub, setsub] = useState(false);

  return (
    <div className="home">
      首页
      <form onSubmit={event => {
        event.stopPropagation();
        event.preventDefault();
        setsub(false);
        return false;
      }}>
        <Prompt when={issub} message={location => `Are you sure you want to go to ${location.pathname}`}></Prompt>
        <input type='text' onChange={event => {
          if (event.target.value.length > 0)
            setsub(true);
        }} />
        <button>按钮</button>
      </form>
    </div>
  )
}

七、路由添加过渡、动画

安装 react-transition-group

cnpm install --save-dev  react-transition-group

新建fade.css文件，写过渡
如：

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

.fade-exit.fade-exit-active {
  opacity: 0;
  transition: opacity 250ms ease-in;
}

在组件中引入fade.css

import "../../CSS/fade.css";

引入TransitionGroup、CSSTransition


import { TransitionGroup, CSSTransition } from 'react-transition-group'

给switch标签外添加TransitionGroup、CSSTransition 标签：

    <TransitionGroup>
      <CSSTransition key={location.key} classNames="fade" timeout={200}>
        <Switch>
          <Route exact path="/">
            <Home />
          </Route>
          <Route path="/cart">
            <Cart />
          </Route>
          <Redirect to="/"></Redirect>
        </Switch>
      </CSSTransition>
    </TransitionGroup>