react（十四）Router的应用

NavLink 组件

• NavLink 与 Link 类似，但是它提供了两个特殊属性用来处理页面导航
• NavLink 在 Link 功能的基础添加了 选中当前项的效果
  • exact exact 精确匹配，NavLink 在匹配前时，默认也是模糊匹配。
  • activeClassName 当前选中项的class，默认为 active
  • activeStyle
  • isActive 判断当前项是否选中 返回值为 true 选中当前，否则不选中

Nav.js

import React from "react";
import { NavLink } from "react-router-dom";
export default function Nav() {
  return <nav className="nav">
    <NavLink to="/" 
      exact 
      activeClassName="link"
      isActive={()=>{
        return true;
      }}
    >首页</NavLink>
    <span> | </span>
    <NavLink 
      to="/about" 
      activeStyle={{
        fontWeight: "bold"
      }}
    >关于</NavLink>
    <span> | </span>
    <NavLink 
      to="/join" 
      activeClassName="link"
      activeStyle={{
        fontWeight: "bold"
      }}
    >加入</NavLink>
    <hr />
  </nav>
}

App.js

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Nav from './component/nav';
import View404 from './view/404view';
import AboutView from './view/aboutview';
import IndexView from './view/indexview';
import JoinView from './view/joinview';
import "./index.css";
function App() {
  return <div id="box">
      <Nav />
      <Switch>
        <Route 
            path={["/","/home"]}
            exact
            component={IndexView}
        />
        <Route 
            path="/about"
            component={AboutView}
        />
        <Route 
            path="/join"
            exact
            strict
            component={JoinView}
        />
        <Route 
          component={View404}
        />
      </Switch>
  </div>;
}
export default App;

路由组件

• 被 Route 直接调用的组件，叫做路由组件
• 通过 Route 去调用视图，即理由组件的两种：
  • component 通过组件直接调用，详见Router的基本使用
  • render 中接收是回调函数，回调函数的返回值中定义该 Route 要渲染的视图
• 在路由组件中，可以获取到 Route 传递的路由参数
• 路由参数:
  • history:
    • go(n) 跳转当前的历史记录，跳转n步 负值回退，正值前进
    • goBack() 返回历史记录上一步
    • goForward() 前进到历史记录下一步
    • push(url,state) 在不刷新的情况下跳转 url
    • length 当前历史记录中记录了多少项
  • location:
    • hash: 当前url中的hash值
    • pathname: 当前的url
    • search: 当前 url 的 search 值
    • state: push 方法传递过来的数据
  • match: 当前路由的匹配信息
    • isExact: true 是否精确匹配
    • params: {} 动态路由传递的参数
    • path: “” 当前 Route path 属性
    • url: “” 当前 url 中被匹配成功的一段
• 传递 props
  App.js

import React, { useState } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
import Nav from './component/nav';
import View404 from './view/404view';
import AboutView from './view/aboutview';
import IndexView from './view/indexview';
import JoinView from './view/joinview';
import "./index.css";
import ListView from './view/list';
function App() {
  const [username,setUser] = useState("");
  return <div id="box">
      <Nav />
      <Switch>
        <Route 
            path={["/","/home"]}
            exact
            render={(routeProps)=>{
              // console.log(routeProps);
              return <IndexView {...routeProps} username={username} />
            }}
        />
        <Route 
            path="/about"
            component={AboutView}
        />
        <Route 
            path="/join"
            component={JoinView}
        />
        <Route 
            path="/list/:page"
            render={()=>{
                if(username){
                  return <ListView />
                }
                return <Redirect to="/" />
            }}
        />
        <Route 
          component={View404}
        />
      </Switch>
  </div>;
}
export default App;

indexView.js

import React from 'react';
export default function IndexView(props) {
  console.log(props);
  return <div>
      <h1>首页视图</h1>
  </div>;
}

joinView.js

import React from 'react';
export default function JoinView(props) {
  console.log(props);
  const {history} = props;
  const {go,goBack,goForward,push,length} = history;
  return <div>
    <h1>加入视图-{length}</h1>
    <button onClick={()=>{
      goBack();
    }}>返回</button>
    <button onClick={()=>{
      goForward();
    }}>前进</button>
    <input 
      type="text" 
      onBlur={(target)=>{
        go(target.value)
      }}
    />
    <br />
    <button onClick={()=>{
        //window.location.href = "/about";
        push("/about",{context:"哈哈"});
    }}>关于</button>
  </div>;
}

• 在非路由导航中，获取路由参数
  • useHistory 获取 history 对象
  • useLocation 获取 location 对象
  • useParams 获取动态路由参数
  • useRouteMatch 获取 match 对象

注意 hooks 是 Router 5 之后才有的, hooks 只能用在 React 函数中

import React from 'react';
import { useHistory, useLocation, useParams, useRouteMatch, withRouter } from 'react-router-dom';
function Pagination(props) {
  let history = useHistory();
  let parmas = useParams();
  let loaction = useLocation();
  let match = useRouteMatch();
  console.log(history,parmas,loaction,match);
  return <div>
      <h1>翻页导航</h1>
  </div>;
}
export default Pagination;

• withRouter
  • 高阶路由(高阶组件): 调用该方法时，返回一个新的组件
  • const newCmp = withRouter(cmp)
  • withRouter 适用于类组件和函数组件

let newPagination = withRouter(Pagination);
export default newPagination;
export default withRouter(Pagination);