ZGuangJu'S NoteBook

React Router

10/8/2020 reactRouter

# 安装

  • 安装 react-router-dom
npm install react-router-dom
or
yarn add react-router-dom

# 路由模块介绍

  • HashRouter hash 模式的路由，带 #
  • BrowserRouter ??
  • history: ??
  • BrowserRouter as Router:使用<BrowserRouter>时引入
  • Redirect:使用<Redirect>时引入
  • NavLink:使用<NavLink>时引入
  • Route:使用<Route>时引入
  • Switch:使用<Switch>时引入
  • Link:使用<Link>时引入
  • ...

# 路由使用 -- 标签及其属性

  • <Router>

作用:包裹路由的容器，放在路由最外层

  • <Switch>

作用:包裹Route标签,包证每次只匹配到一个路由,匹配到路由就不再继续往下匹配了。

路由用<Switch>标签包裹后，保证每次只匹配到一个路由，匹配到第一个路由就不再继续往下匹配了。

注意：

如果路由<Route>不加 exact 也不用Switch包裹， 就会同时匹配到/和你要跳转的路由/about 如果不使用/作为path，可以不加exact和Switch.

如下：

<Switch>
    <Route exact path='/' component={Home}></Route>
    <Route path='/about' component={About}></Route>
</Switch>
  • <Route>

作用:表示路由组件(每一个路由)

路由模式

  • HashRouter: hash 模式的路由，带 #;
  • BrowserRouter: history 模式的路由;

属性和详情

component、exact、strict、sensitive ...
  1. pach

表示路由的路径 /home => Home组件

  1. component

作用:表示该路由对应的是什么组件(路由名)

  1. 路由上的属性会通过props传递给组件

  2. exact

作用:精确匹配(默认是true）

exact路由的匹配时会匹配前缀，精确匹配 要使用exact

// 一般和 Switch 共用
<Switch>
    <Route exact path='/' component={Home}></Route>
    <Route path='/about' component={About}></Route>
</Switch>
  1. strict

作用:严格匹配

严格模式下，路由路径/home/不能匹配到/home ，必须用一致。

// Link
<Link to="/home"></Link>
// Route
<Route strict path='/home/' component={Home}></Route>
  1. sensitive

作用:大小写严格匹配

// Link
<Link to="/Home"></Link>
// Route
<Route sensitive path='/home' component={Home}></Route>
//   大小写不一致，不能匹配到

  1. render 作用：替代 react 组件渲染

  2. 路径带参数 pathname/:value 路由的路径上携带参数 会被对应组件的 props 接收到(如 /use/3 /use/1). 会有根据多个用户的id访问用户详情的情况（/use/:id），:id不固定的但是必须传,路径参数(路由所有的(match、location、 history) 会通过props传递到组件里面； 参数会传到组件的props.match.params上，例如 props.match.params.id

// 路由标签上传参
    <Route path='/user/:id' component={User}></Route>
// 组件里接收
import React from "react";
function User(props) {
    console.log(props); //组件里接收参数
    console.log(props.location.pathname);
    return (
        <div>{/* 这里通过props使用传递的值 */}
            这是用useParams取到的{props.match.params.id}
            这是当前路径{props.location.pathname}
        </div>
    );
}
export default User;

  • props.history 放的时路由跳转的方法

    • go(-1)：值为1/-2代表前进或后退几个路由。

    • push('/about)：跳转到/about

    • goBack()：返回；

    • goForward()：前进。

    <button onClick={() => props.history.push('/about')}>跳转</button>
    <button onClick={() => props.history.goForward()}>前进</button>
  • <Link/> 和 <NavLink/>

作用:导航组件

<Link/> 和 <NavLink/>的to 是一样的。

to 属性决定往哪里跳转，(其实<Link>底层就是<a/> herf决定往哪里跳，项目例直接用<a></a>标签也能跳转路由),匹配的是<Route/>的pach属性.

Link 标签的属性的值

  1. to = 'string' -- to = '/home' 直接写pathname可以跟参数
  2. to = object
to={{ pathname: '/home'}}
  • pathname: 表示要链接到的路径的字符串。
  • search: 表示查询参数的字符串形式。
  • hash: 放入网址的 hash，例如 #a-hash。
  • state: 状态持续到 location。通常用于隐式传参（埋点），可以用来统计页面来源
  1. to = {fun()}
 <Link to={location => `${location.pathname}?nam=lili`} />
 <Link to={location => `${location.pathname}?sort=name`} />

<NavLink>的属性

NavLink属性详情

  1. activeClassName: string ,激活时的class（选中哪个路由哪个class改变）

  2. activeSytle: Object, 激活时的样式（选中哪个路由哪个样式改变）

  3. exact 同上

  4. strict 同上

注意：

激活的 navlink 会自动添加类名 (class="active") 如果设置了 activeClassName 则不生效（class="selected"）

  • <Redirect>

作用:重定向 属性 to:和<Link> 和 <NavLink>的to属性相同。只是代表输入除已经定义以外的路由时，同义跳转到某一位置。 to属性

 <Redirect to='/user'></Redirect>

传state属性

 <Redirect to={{ pathname: '/login', state: { from: location.pathname } }
    }></Redirect >

# 路由Hooks

使用路由Hooks要react版本16.8以上。

  1. useHistory 路由跳转

作用:使用路由History模式，跳转路由

import React from "react";
// 引入
import { useHistory } from 'react-router-dom'
function Home(props) {
    // 初始化
    let history = useHistory()
    return (
        <div>
            这是home
           {/* 使用 */}
            <button onClick={() => history.push('/about')}>跳转</button>
        </div>
    );
}
export default Home;
  1. useParams 接收参数

作用:在路由组件种接收参数(类组件用props传递，函数组件用props或useParams)

import React from "react";
// 组件里引入useParams 这个Hook
import { useParams } from 'react-router-dom';
function Home(props) {
    // 注册或叫初始化 useParams()
    let params = useParams()
    return (
        <div>
            通过useParams取到的{params.id}
            通过props获取的路径{props.location.pathname}
        </div>
    );
}
export default Home;
  1. useLocation() 获取当前的路由

获取当前路由上的值和方法

import React from "react";
// 组件里引入useLocation 这个Hook
import { useLocation } from 'react-router-dom';
function Home(props) {
    // 注册或叫初始化 useLocation()
    let route = useLocation()
    console.log(route)
    return (
        <div>
            通过 useLocation 取到的路由信息{route.pathname}
        </div>
    );
}
export default Home;
  1. useRouteMatch() 获取路由匹配信息 用来匹配路由，

参数(和匹配的path的props参数相同):

let match = useRouteMatch({
    path:'/home/:id',
    strict:true
    ...
})

需要获取路由信息，但是不用渲染出路由的时候，使用这个方法。

# 案例

import React from "react";
import {
 Router,
 Switch,
 Route,
 Link
} from "react-router-dom";

export default function App() {
 return (
   <Router>
     <div>
       <nav>
         <ul>
           <li>
             <Link to="/">Home</Link>
           </li>
           <li>
             <Link to="/about">About</Link>
           </li>
           <li>
             <Link to="/users">Users</Link>
           </li>
         </ul>
       </nav>

          {/* A <Switch> looks through its children <Route>s and
           renders the first one that matches the current URL. */}
       <Switch>
         <Route path="/about">
           <About />
         </Route>
         <Route path="/users">
           <Users />
         </Route>
         <Route path="/">
           <Home />
         </Route>
       </Switch>
     </div>
   </Router>
 );
}

function Home() {
 return <h2>Home</h2>;
}

function About() {
 return <h2>About</h2>;
}

function Users() {
 return <h2>Users</h2>;
}

# 过渡动画

安装

yarn add react-transition-group

引入

import { TransitionGroup, CSSTransition } from "react-transition-group";
最后提交: 7/15/2022, 10:42:12 AM

React 使用Sass