React学习之路 - ReactRouter的使用

萨勒_芬妮
227 阅读3分钟

201338-1709295218e233.jpg

一 ReactRouter的快速开始

1. 什么是前端路由

  • 一个路径path对应一个组件component, 当我们在浏览器访问其中一个path, path对应的组件就会在页面进行渲染
const routes = [
    {
        path: '/login',
        component: Login
    },
    {
        path: '/index',
        component: Index
    },
]

2. 创建开发环境 (CRA)

  1. 创建项目并安装所有依赖 npx create-react-app react-router
  2. 安装最新的ReactRouter包 npm i react-router-dom
  3. 启动项目 npm start

二 开发中, 路由的基本使用

  • 创建router文件夹,这里用于书写所有的路由
  • 最后将路由引入到入口文件index.js,使用RouterProvider注入

登录页 src/page/Login/index.js

const Login = () => {
  return <div>login 登录</div>
}

export default Login;

首页 src/page/Index/index.js

const index = () => {
  return <div>index 首页</div>
}

export default index;

路由 src/router/index.js

import { createBrowserRouter } from "react-router-dom";
import Login from "../page/Login";
import Index from "../page/Index";

const router = createBrowserRouter([
  {
    path: '/login',
    element: <Login/>
  },
  {
    path: '/index',
    element: <Index/>
  },
])

export default router;

入口文件 src/index.js

import {  RouterProvider } from 'react-router-dom';
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <RouterProvider router={router} />
);

三 路由导航

1. 什么是路由导航

  • 路由系统中, 多个路由之间需要进行路由跳转, 并且在跳转的同时有可能需要传递参数进行通信

2. 声明式导航

  • 通过Link进行跳转(to属性)
  • 应用场景: 后台系统, 左侧的菜单栏
import { Link } from "react-router-dom";

const Login = () => {
  return <div>
    login 登录页
    <Link to="/index">跳转到首页</Link>
    </div>
}

export default Login;

3. 编程式导航

  • 通过useNavigate钩子获取导航方法, 再通过调用方法以命令式的形式进行路由跳转
import { useNavigate } from "react-router-dom";

const Login = () => {
  const navigate = useNavigate()
  return <div>
    login 登录
    <button onClick={() => navigate('/index')}>点击跳转首页</button>
    </div>
}

export default Login;

四 导航传参

1. searchParams传参 (useSearchParams)

src/Login/index.js (传参)

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

const Login = () => {
  const navigate = useNavigate()
  return <div>
    login 登录
    <button onClick={() => navigate('/index?id=1001&name=赵露思')}>SearchParams传参</button>
    </div>
}

export default Login;

src/Inex/index.js(接收)

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

const Index = () => {
  const [params] =useSearchParams()
  const id = params.get('id');
  console.log('id  ----->  ', id);
  return <div>index 首页</div>
}

export default Index;

2. params传参 (useParams)

/src/router/index.js

...

const router = createBrowserRouter([
  ...
  {
    path: '/index/:id',
    element: <Index/>
  },
])

export default router;

/src/Login/index.js (传参)

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

const Login = () => {
  const navigate = useNavigate()
  return <div>
    login 登录
    <button onClick={() => navigate('/index/1002')}>params传参</button>
    </div>
}

export default Login;

/src/Index/index.js (接收)

import { useParams, useSearchParams } from "react-router-dom";

const Index = () => {
  const params = useParams();
  console.log('id  ----->  ', params.id);
  return <div>index 首页</div>
}

export default Index;

五 嵌套路由

1. 什么是嵌套路由

  • 在一级路由中内嵌了其他路由, 这种关系就叫嵌套路由

2. 嵌套路由配置

  1. 使用children属性配置嵌套关系
  2. 使用<Outlet />组件配置二级路由渲染位置

/src/Layout/index.js

import { Link, Outlet } from "react-router-dom";

const Layout = () => {
  return <div>
    布局 Layout
    <Link to="/board">面板</Link>
    <Link to="/about">关于</Link>
    <Outlet />
    </div>
}

export default Layout;

/src/About/index.js


const About = () => {
  return <div>关于 About</div>
}

export default About;

/src/Board/index.js


const Board = () => {
  return <div>面板 Board</div>
}

export default Board;

/src/router/index.js

...
import About from "../page/About";
import Board from "../page/Board";
import Layout from "../page/Layout";

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout/>,
    children: [
      {
        path: '/about',
        element: <About/>
      },  
      {
        path: '/board',
        element: <Board/>
      },  
    ]
  },
  ...
])

export default router;

3. 默认二级路由 (类似重定向)

  • 场景: 当访问的是一级路由, 默认的二级路由可以得到渲染
  • 二级路由需要渲染的页面, 去掉path, 设置index=true

/src/router/index.js

...
import About from "../page/About";
import Board from "../page/Board";
import Layout from "../page/Layout";

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout/>,
    children: [
      {
        index: true,
        element: <About/>
      },  
      {
        path: '/board',
        element: <Board/>
      },  
    ]
  },
  ...
])

export default router;

4. 404路由配置

  • 当浏览器输入不存在的url路径时找不到路由, 为了用户体验, 使用404兜底组件进行渲染
  1. 准备一个NotFound组件
  2. 路由表中,在数组的末尾, 以*号作为path配置路由 /src/Board/index.js

const NotFound = () => {
  return <div>页面消失不见啦</div>
}

export default NotFound;

/src/router/index.js

...
import NotFound from "../page/NotFound";

const router = createBrowserRouter([
  ...
  {
    path: '*',
    element: <NotFound/>
  },
])

export default router;

5. 两种路由模式

  • history模式, createBrowerRouter创建
  • hash模式, createHashRouter创建

image.png

avatar
文章
阅读
粉丝