麦西的西

V1

2023/01/17阅读:8主题:凝夜紫

三分钟入门 react-router-dom v6

一、安装

npm install react-router-dom@6 -S

二、使用

我们使用 vite 初始化 react 项目:

yarn create vite react-router-v6-demo --template react

更多关于 vite 的使用,参考vite 官网

1. 基本的路由配置

// main.jsx 入口文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
// App.jsx
import React from 'react';
import './App.css';

import { BrowserRouter, Routes, Route } from 'react-router-dom';

import BasicLayout from './layout/BasicLayout';
import Home from './pages/Home';
import ArticleList from './pages/ArticleList';
import Detail from './pages/Detail';

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path='/' element={<BasicLayout />}>
          <Route index element={<Home />} />
          <Route path='articleList' element={<ArticleList />} />
          <Route path='articleList/:id' element={<Detail />} />
          <Route path='*' element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

最外层的 Route 里面包含了四条路由(嵌套路由,后面会详细说明),其中: index 表示是索引路由。当地址为'/'的时候,默认打开 Home 页面。 path='articleList/:id'是路由传参,比较适用于列表详情的场景,通过不同的 id 展示不同的文章。

path='\*'表示可以匹配任何路由,当找不到路由时候,会默认跳到 NotFound 页面。

2. 嵌套路由

在 Route 中包含子路由即可,如下:

// ...
<Route path='/' element={<BasicLayout />}>
  <Route index element={<Home />} />
  <Route path='articleList' element={<ArticleList />} />
  <Route path='articleList/:id' element={<Detail />} />
  <Route path='*' element={<NotFound />} />
</Route>
// ..
// BasicLayout/index.jsx
import React from 'react';
import styles from './index.module.scss';

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

const BasicLayout = () => {
  return (
    <div className={styles.basicLayout}>
      <div className={styles.nav}>
        <Link to='/'>Home</Link> | <Link to='articleList'>ArticleList</Link>
      </div>
      {/* Outlet相当于是子路由的占位符 */}
      <Outlet />
    </div>
  );
};
export default BasicLayout;

需要注意的是 BasicLayout 里面的 <Outlet />,相当于是子路由的占位符,不可缺少。

3.路由传参

有两种形式传参。第一种直接使用路由传参,第二种通过 query 的形式传参(也就是 url 后加?xx=xx)的形式。

直接路由传参的话,需要配置路由,如下:

<Route path='articleList/:id' element={<Detail />} />

跳转前的页面参数传值:

// ArticleList/index.jsx
import React from 'react';
import styles from './index.module.scss';

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

const ArticleList = () => {
  const navigate = useNavigate();
  return (
    <div className={styles.articleList}>
      这里是articleList页面
      <ul>
        <li onClick={() => navigate('/articleList/1?author=jack&age=18')}>文章1</li>
        <li onClick={() => navigate('/articleList/2')}>文章2</li>
        <li onClick={() => navigate('/articleList/3')}>文章3</li>
      </ul>
    </div>
  );
};

最后,在详情页面接收我们的传参:

// Detail/index.jsx
import React from 'react';
import styles from './index.module.scss';

import { useParams } from 'react-router-dom';

const Detail = () => {
  const params = useParams();
  const [searchParams] = useSearchParams();
  console.log('searchParams', searchParams.getAll('author')[0]); // jack
  return <div className={styles.detail}>{`这里是文章${params.id}`}</div>;
};

export default Detail;

我们通过useNavigate来进行跳转页面,useParams 或者 useSearchParams 来接收不同形式的传参。

4. 路由监听

import React, { useEffect } from 'react';
import styles from './index.module.scss';

import { useLocation } from 'react-router-dom';

const NotFound = () => {
  const location = useLocation();

  useEffect(() => {
    console.log(location.pathname, "enter")
    return () => {
      console.log(location.pathname, "leave")
    }
  }, [location.pathname])

  return <div className={styles.notFound}>404</div>;
};

export default NotFound;

我们可以使用 useLocation 来获取我们的当前路由的信息,然后通过 useEffect 来监听,从而实现路由监听。

5.路由对象

日常开发中,一般会把路由分开,单独写一个配置文件。

react-router-dom v6 提供了路由对象的支持,我们可以把路由写成一个对象,然后通过 useRoutes 来解析。

// config/router.config.jsx
import React from 'react';
import BasicLayout from '../src/layout/BasicLayout';
import Home from '../src/pages/Home';
import ArticleList from '../src/pages/ArticleList';
import Detail from '../src/pages/Detail';
import NotFound from '../src/pages/NotFound';

const routes = [
  {
    path: '/',
    element: <BasicLayout />,
    children: [
      {
        index: true,
        element: <Home />
      },
      {
        path: 'articleList',
        element: <ArticleList />
      },
      {
        path: 'articleList/:id',
        element: <Detail />
      },
      {
        path: '*',
        element: <NotFound />
      }
    ]
  }
];

export default routes;
// App.jsx
import React from 'react';
import './App.css';

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

const App = () => <>{useRoutes(routes)}</>

export default App;
// main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

import { BrowserRouter } from 'react-router-dom';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

其实也可以自己手写一个 getRoutes 方法来从配置文件中解析出路由。

App.jsx
import React from 'react';
import './App.css';

import { useRoutes, Routes, Route } from 'react-router-dom';
import routes from '../config/router.config';

const getRoutes = (routes) => {
  const routesElement = routes.map((item, index) => {
    return (
      <Route index={item.index} path={item.path} element={item.element} key={`${item.path}${index}`}>
        {item.children?.length ? getRoutes(item.children) : null}
      </Route>
    );
  });
  return routesElement;
};
// const App = () => <>{useRoutes(routes)}</>
const App = () => <Routes>{getRoutes(routes)}</Routes>

export default App;

6. 路由懒加载

通过动态 import 导入,能够打包成单独的 chunk。 再加上 react 提供的懒加载 api lazySuspense即可实现路由懒加载。

// config/router.config.jsx
import React, { Suspense, lazy } from 'react';
import BasicLayout from '../src/layout/BasicLayout';

const lazyLoad = (src) => <Suspense fallback={<>...</>}>{React.createElement(lazy(src))}</Suspense>;

const routes = [
  {
    path: '/',
    element: <BasicLayout />, // BasicLayout是基本布局,不必使用懒加载
    children: [
      {
        index: true,
        element: lazyLoad(() => import('../src/pages/Home'))
      },
      {
        path: 'articleList',
        element: lazyLoad(() => import('../src/pages/ArticleList'))
      },
      {
        path: 'articleList/:id',
        element: lazyLoad(() => import('../src/pages/Detail'))
      },
      {
        path: '*',
        element: lazyLoad(() => import('../src/pages/NotFound'))
      }
    ]
  }
];

export default routes;
// App.jsx
import React from 'react';
import './App.css';

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

const App = () => <>{useRoutes(routes)}</>;

export default App;

这样就实现了路由懒加载。每次打开新的路由时,就会请求该路由对应组件的资源。

具体效果图:

参考资料: React Router v6 官方文档

分类:

前端

标签:

前端

作者介绍

麦西的西
V1

公众号:前端成长攻略,学习路线+最新资料