提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  工具

当前栏目

react路由、NavLink组件封装

路由封装组件React
2023-09-11 14:19:39 时间

-

react路由其实是借助BOM中的History对象实现的，专门有一个history.js的库，可以让操作history对象简单起来。

用history.js可以通过两种方式创建路由对象：

1、History.createBrowserHistory()   // 直接使用h5推出的history身上的api   （有些老的浏览器会不支持）

2、History.createHashHistory()  // 直接使用原生的 hash值（锚点） （所有浏览器都支持）

创建好的对象上有 push、replace、back、forward方法，可以操作路由

historyObj.listen( location => {  console.log(location) }); 监听路由变化

 

react路由的插件库是 react-router-dom

下面以react-router-dom@5实验

整个应用需要用一个路由器包裹，否则每个路由器中的路由是独立的

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import App from './App'

ReactDOM.render(<BrowserRouter><App /></BrowserRouter>, document.getElementById('root'))

基本的路由配置

import React from 'react'
import { Link, Route } from 'react-router-dom'
import Home from './components/Home'
import About from './components/About'
import './App.css'

// 创建外壳组件App
class App extends React.Component {
  
  render() {
    return (
      <div className="container">
        <h1>react-router-dom-demo</h1>
        <div className="main">
          <aside className="aside">
            { /**
             * 编写路由链接
             * 在react中，靠路由连接切换组件
             */}
              <Link className="btn" to="/home">home</Link>
              <Link className="btn" to="/about">about</Link>
          </aside>
          <div className="content">
            {/**
             * 注册路由
             */}
              <Route path="/home" component={Home}></Route>
              <Route path="/about" component={About}></Route>
          </div>
        </div>
      </div>
    )
  }
}

export default App

 路由组件和一般组件的区别？

1、接收props不同

路由组件会收到路由传给组件的props：history、location、match

2、写法不同   <Demo/>  <Route path="/demo" component={Demo} />

3、存放位置不同

一般组件放在components文件下，路由组件存放在pages或views文件下，名字自己定义

NavLink组件的使用：

import { NavLink } from 'react-router-dom'
<NavLink className="btn" activeClassName="active" to="/home">home</NavLink>

NavLink有个activeClassName属性，用来指定当前选中的类名，默认是active，如果是active可以省略

 NavLink组件的封装：

NavLink 上需要传activeClassName 和 class，一个项目中的NavLink组件几乎传的这两个class都一样，把它封装成一个组件，就不用每个都传一遍了

MyNavLink组件
import React, { Component } from 'react'
import { NavLink  } from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
    // const { title, children } = this.props;
    return (
      // <NavLink className="btn" activeClassName="active" to={to}>{title}</NavLink>
      // <NavLink className="btn" activeClassName="active" {...this.props}>{children}</NavLink>
      // 标签体内容是一个特殊的标签属性（children)
      // <NavLink className="btn" activeClassName="active" {...this.props} children={children} />
      // children也包含在了this.props中，children={children}可以省略
      <NavLink className="btn" activeClassName="active" {...this.props} />
    )
  }
}

使用：

<MyNavLink to="/home">home</MyNavLink>

 Switch的使用

　　　　　　　　　import { Switch } from 'react-router-dom'
　　　　　　　　<Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/about" component={Test}></Route>
              </Switch>

上面路由/about 对应了两个组件，如果未用Switch标签包裹起来，/about会同时展示 About、Test两个组件，用Switch标签包起来后，路由匹配到第一个组件后，就不会再往下匹配，/about只会匹配About组件。

BrowserRouter模式下，第三方css样式丢失问题，如果多级路由，css文件是用./相对路径引入的话，刷新页面会出现样式丢失的问题，因为相对路径会把路由的路径带上去，导致在public目录页下找不到资源，找不到资源的情况下会默认把index.html返回，解决办法有：1、把./相对路径改成绝对路径/,2、换成hash路由

 路由的模糊匹配与精准匹配：

路由默认是模糊匹配

<MyNavLink to="/home/a/b">home</MyNavLink>
可以匹配
<Route path="/home" component={Home}></Route>

开启精准匹配：

　　　　　　　　<Switch>
                <Route exact path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Route exact={true} path="/home/a/b" component={Test}></Route>
              </Switch>

 精准匹配不要随便开启，只有不开精确匹配会导致错误时，才开启精确匹配，（开启精确匹配后，将无法访问子路由）

 路由重定向  Redirect  的使用：

　　　　　　　　 import { Link, NavLink, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
              <Switch>
                <Route path="/home" component={Home}></Route>
                <Route path="/about" component={About}></Route>
                <Route path="/home" component={Test}></Route>
                <Redirect to="/home"></Redirect>
              </Switch>

Redirect写在注册路由的最下方，当没有匹配到任何路由时，会重定向到 Redirect指定的路由

 嵌套路由：

在/home路由下写两个子路由

import React, { Component } from 'react'
import { Route, Redirect, Switch  } from 'react-router-dom';
import MyNavLink from '../../components/MyNavLink';
import News from './News'
import Message from './Message'

export default class Home extends Component {
  render() {
    console.log('home组件收到的props是：', this.props);
    return (
      <div>
        <h1>我是Home的内容</h1>
        <ul className="tab">
          <li className="tab-items">
            <MyNavLink to="/home/news">news</MyNavLink>
          </li>
          <li className="tab-items">
            <MyNavLink to="/home/message">message</MyNavLink>
          </li>
        </ul>
        {/** 注册路由 */}
        <Switch>
          <Route path="/home/news" component={News}></Route>
          <Route path="/home/message" component={Message}></Route>
          <Redirect to="/home/news"></Redirect>
        </Switch>
      </div>
    )
  }
}

向路由组件传递params参数：

1、传递

2、声明

3、接收

import React, { Component } from 'react'
import { Link, NavLink, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ]
  }
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {
            messageArr.map(msgObj => {
              return (
                <li key={msgObj.id}>
                  {/** 向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/** 声明接收params参数 */}
        <Route path="/home/message/detail/:id/:title" component={Detail}></Route>
      </div>
    )
  }
}

接收

import React, { Component } from 'react'
const Detaildata = [
  { id: '01', content: '你好，中国' },
  { id: '02', content: '你好，尚硅谷' },
  { id: '03', content: '你好，未来的自己' },
]

export default class Detail extends Component {
  render() {
    console.log(this.props, 'detail的props');
    // 接收params参数
    const { id, title } = this.props.match.params;
    const findResult = Detaildata.find(item => item.id === id);
    return (
      <ul>
        <li>ID: {id}</li>
        <li>TITLE: {title}</li>
        <li>CONTENT: {findResult.content}</li>
      </ul>
    )
  }
}

 向路由传递search参数：

1、传递search参数无需声明

2、接收search参数时需要把查询字符串转换成key-value形式的对象，取值方便，这里借用了一个库 qs 老版本用 querystring，是react脚手架自带的库；

{/* 向路由组件传递search参数 */}
<Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link>
{/* search参数无需声明接收 */}
<Route path="/home/message/detail" component={Detail}></Route>

接收search参数
import qs from 'qs' // urlencode和object转换
const { search } = this.props.location;
const { id, title } = qs.parse(search.slice(1));

 向路由组件传递state参数：

1、传递state参数，需要是个对象的形式

2、接收时再props.location.state中获取

{/* 向路由传递state参数  刷新页面时state参数不会丢失，因为state维护在history对象上，如果换了浏览器，此参数会丢失 */}
<Link to={ { pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } } }>{msgObj.title}</Link>
{/* state参数无需声明接收 */}
<Route path="/home/message/detail" component={Detail}></Route>
// 接受state参数
const { id, title } = this.props.location.state || {};

 路由开启replace模式：

路由默认是push模式，会留下记录，可以前进后退，如果开启replace模式，就不会有记录了

<Link replace to={ { pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } } }>{msgObj.title}</Link>
// 或者
<Link replace={true} to={ { pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } } }>{msgObj.title}</Link>

 编程式路由导航：

import React, { Component } from 'react'
import { Link, NavLink, BrowserRouter, Route, Switch, Redirect } from 'react-router-dom'
import Detail from './Detail';

export default class Message extends Component {
  state = {
    messageArr: [
      { id: '01', title: '消息1' },
      { id: '02', title: '消息2' },
      { id: '03', title: '消息3' },
    ]
  }
  // repalce跳转
  replaceShow = (id, title) => {
    // replace跳转+携带params参数
    // this.props.history.replace(`/home/message/detail/${id}/${title}`)

    // replace跳转+携带query参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)

    // replace跳转+携带state参数
    this.props.history.replace(`/home/message/detail`, { id, title })
  }
  // push跳转
  pushShow = (id, title) => {
    // push跳转+携带params参数
    // this.props.history.push(`/home/message/detail/${id}/${title}`)

    // push跳转+携带query参数
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}`)

    // push跳转+携带state参数
    this.props.history.push(`/home/message/detail`, { id, title })
  }
  // 回退
  back = () => {
    this.props.history.goBack()
  }
  // 前进
  forword = () => {
    this.props.history.goForward()
  }
  // go
  go = () => {
    this.props.history.go(-1); // 负数代表后退几步，正数代表前进几步
  }
  render() {
    const { messageArr } = this.state;
    return (
      <div>
        <ul>
          {
            messageArr.map(msgObj => {
              return (
                <li key={msgObj.id}>
                  {/** 向路由组件传递params参数 */}
                  <Link to={`/home/message/detail/${msgObj.id}/${msgObj.title}`}>{msgObj.title}</Link>
                  {/* 向路由组件传递search参数 */}
                  {/* <Link to={`/home/message/detail?id=${msgObj.id}&title=${msgObj.title}`}>{msgObj.title}</Link> */}
                  {/* 向路由传递state参数  刷新页面时state参数不会丢失，因为state维护在history对象上，如果换了浏览器，此参数会丢失 */}
                  {/* <Link replace to={ { pathname: '/home/message/detail', state: { id: msgObj.id, title: msgObj.title } } }>{msgObj.title}</Link> */}
                  <button onClick={() => this.pushShow(msgObj.id, msgObj.title)}>push查看</button>
                  <button onClick={() => this.replaceShow(msgObj.id, msgObj.title)}>replace查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr />
        {/** 声明接收params参数 */}
        {/* <Route path="/home/message/detail/:id/:title" component={Detail}></Route> */}
        {/* search参数无需声明接收 */}
        {/* <Route path="/home/message/detail" component={Detail}></Route> */}
        {/* state参数无需声明接收 */}
        <Route path="/home/message/detail" component={Detail}></Route>
        <hr />
        <button onClick={ this.back }>回退</button>
        <button onClick={ this.forword }>前进</button>
        <button onClick={ this.go }>go</button>
      </div>
    )
  }
}

 withRouter的使用：

一般组件像使用路由跳转的功能，需要用withRouter加工一下，使一般组件拥有路由组件的api

import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'

class Header extends Component {
  // 回退
  back = () => {
    this.props.history.goBack()
  }
  // 前进
  forword = () => {
    this.props.history.goForward()
  }
  // go
  go = () => {
    this.props.history.go(-1); // 负数代表后退几步，正数代表前进几步
  }
  render() {
    console.log(this.props, 'Header组件的props');
    return (
      <h3>
        react-router-dom-demo
        <button onClick={ this.back }>回退</button>
        <button onClick={ this.forword }>前进</button>
        <button onClick={ this.go }>go</button>
      </h3>
    )
  }
}
// withRouter可以加工一般组件，让一般组件拥有路由组件特有的api（props:{ history, location, match }）
// withRouter的返回值是一个新组件
export default withRouter(Header)

 BrowserRouter和HashRouter的区别：

 

 

 

 

 

 

-

相关文章