React入门08-ReactRouter教程

快速体验ReactRouter

        首先我们需要在项目中ReactRouter的依赖，关于如何搭建React项目请参照之前的博文React入门01-从零开始快速搭建react基础开发环境。

npm i react-router-dom

        我们现在来简单实现一个路由，实现最简单的路由需要使用createBrowserRouter创建路由对象，在顶层使用RouterProvider，将router对象挂载到RouterProvider组件上，这样我们就实现了一个最简单的路由。

import React from 'react';
import ReactDOM from 'react-dom/client';


// 导入路由所必须的组件和方法
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

// 创建router
const router = createBrowserRouter([
    {
        path: '/page1',
        element:<div>page1</div>
    },
    {
        path: '/page2',
        element:<div>page2</div>
    }
])

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

抽象路由模块

        遵循分层的思想，我们的路由模块也需要在专门的目录进行存放，同样在router目录下有modeles用于存放不同业务区分的子路由，index.js组装成总的路由，然后再最外层的index.js文件当中进行挂载。

        目录结构如下图所示：

        在编写路由内容时我们首先要创建两个组件，如下图所示：