一、React-Router的使用

1. 安装操作

npm install react-router-dom

1. 基本使用

react路由提供了两种路由模式的组件：HashRouter 和 BrowserRouter， 需要在入口对App文件进行包裹 路由映射关系配置

import {HashRouter} from 'react-router-dom'
root.render(
    <HashRouter>
        <App />
    </HashRouter>
)

2. 路由嵌套

import React, { PureComponent } from 'react'

import {Routes, Route, Link, NavLink, Navigate} from 'react-router-dom'

// 一级路由
import Home from './pages/Home/index'
import About from './pages/About/index'

// 嵌套路由
import HomeSong from './pages/Home/HomeSong/index'
import HomeVideo from './pages/Home/HomeVideo/index'

// 404页面
import NotFound from './pages/NotFound/index'

export class App extends PureComponent {
  render() {
    return (
      <div className="app">
        <div className="header">
          <h2>头部内容</h2>
          <div className="nav">
            <NavLink to='/home'>首页</NavLink>
            <NavLink to='/about'>关于</NavLink>
          </div>
        </div>
        <div className="content">
          {/* 配置映射关系 */}
          <Routes>
            <Route path='/' element={<Navigate to='/home' />} />
            <Route path='/home' element={<Home />}>
              {/* 嵌套路由 */}
              <Route path='/home' element={<Navigate to='/home/song' />} />
              <Route path='/home/song' element={<HomeSong />} />
              <Route path='/home/video' element={<HomeVideo />} />
            </Route>
            <Route path='/about' element={<About />} />
            <Route path='*' element={<NotFound />} />
          </Routes>
        </div>
        <div className="footer">Footer</div>
      </div>
    )
  }
}

export default App

3. 代码跳转

3.1 函数组件代码跳转

import { useNavigate } from "react-router-dom";

function HomeVideo() {
  const navigate = useNavigate();

  function btnClick() {
    navigate("/NotFound");
  }

  return <h3 onClick={() => btnClick()}>函数组件点击跳转</h3>;
}

export default HomeVideo;

3.2 类组件代码跳转

import React, { PureComponent } from "react";
import { useNavigate } from "react-router-dom";

export class index extends PureComponent {
  btnClick() {
    const { navigate } = this.props.router;
    console.log(navigate);
    navigate("/about");
  }

  render() {
    return <h1 onClick={() => this.btnClick()}>按钮点击跳转</h1>;
  }
}

// 封装一个高阶函数
function withRouter(WrapperComponent) {
  return function (props) {
    const navigate = useNavigate();
    const router = { navigate };
    return <WrapperComponent {...props} router={router} />;
  };
}

export default withRouter(index);

4. 参数传递

// 方便类组件程序跳转、路由参数获取
import { useNavigate, useParams, useLocation, useSearchParams} from 'react-router-dom'

function withRouter(WrapperComponent) {
  return function (props) {
    // 页面跳转
    const navigate = useNavigate();
    
    // /detail/:id
    const params = useParams();
    
    // /detail?id=19
    const location = useLocation()
    // const queryArr = useSearchParams()
    
    const router = { navigate, params, location };
    return <WrapperComponent {...props} router={router} />;
  };
}

export default withRouter

const { params，navigate } = this.props.router;

5. 配置方式

import { Navigate } from 'react-router-dom'

import Home from '../pages/Home/index'
import About from '../pages/About/index'
import Detail from '../pages/Detail/index'

import HomeSong from '../pages/Home/HomeSong/index'
import HomeVideo from '../pages/Home/HomeVideo/index'

import NotFound from '../pages/NotFound/index'

// 懒加载
const Login = React.lazy(() => import('../pages/login/index'))


const routes = [
  {
    path: '/',
    element: <Navigate to='/home' />
  },
  {
    path: '/home',
    element: <Home />,
    children: [
      {
        path: '/home',
        element: <Navigate to='/home/song' />,
      },
      {
        path: '/home/song',
        element: <HomeSong />,
      },
      {
        path: '/home/video',
        element: <HomeVideo />,
      }
    ]
  },
  {
    path: '/about',
    element: <About />
  },
  {
    path: '/detail/:id',
    element: <Detail />
  },
  {
    path: '*',
    element: <NotFound />
  }
]

export default routes


import {useRoutes} from 'react-router-dom'
import routes from './router/index'

{useRoutes(routes)}