React18学习笔记(三) ReactRouter--React中的路由,路由导航和传参,嵌套路由,,默认二级路由,404页,路由重定向,hash模式和history模式

原创

已于 2025-10-01 16:46:55 修改 · 643 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #ReactRouter #路由

于 2025-09-19 20:36:42 首次发布

文章目录

0.准备

前端路由回顾:
一个路径path对应一个组件component,当访问一个路径时对应的组件会在页面进行渲染
环境搭建:

创建项目:npx create-react-app my-react-router
进入项目目录:cd my-react-router
安装所有依赖:npm i
安装ReactRouter包:npm i react-router-dom
启动项目:npm run start

1.示例:快速创建一个切换登录页和文章页的路由系统

//src/index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';
import {
   
    createBrowserRouter, RouterProvider } from 'react-router-dom';

// 创建路由实例对象
const router = createBrowserRouter([
  {
   
   
    path: '/login',
    element: <div>我是登录页</div>
  },
  {
   
   
    path: '/article',
    element: <div>我是文章页</div>
  }
])

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={
   
   router}></RouterProvider>
    {
   
   /* <App /> */}
    {
   
   /* 此处为何不需要根组件App?
    因为RouterProvider已经包含了根组件,
    具体来说:就是，在React Router v6中，RouterProvider组件充当了根路由组件的角色。
    这意味着你可以直接将你的应用内容包裹在<RouterProvider>标签内，
      而不需要额外的顶层App组件来包裹整个应用程序。 */}
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

成功标志:地址栏localhost:3000/login有显示
*注释掉根组件App,意味着由路由来管理页面

2.实际开发中的路由配置

step1:在配置模块新增两个组件

┌─src
├─pages                 业务页面文件存放的目录
│  ├─article
│  │  └─index.js       文章页
│  └─login
│     └─index.js       登录页 

****代码****
//article/index.js
const Article=()=>{
   
   
  return <div>我是文章页</div>;
}
export default Article

//login/index.js
const Login=()=>{
   
   
    return <div>我是登录页</div>
})
export default Login

step2:新增router模块,引入组件,配置对应关系

新增模块src/router/index.js

//导入
import Login from "../page/login"
import Article from "../page/article"
import {
   
   createBrowserRouter} from 'react-router'
//创建路由实例对象
const router=createBrowserRouter({
   
   
    {
   
   
        path:'/login',
        element:<Login />
    },
    {
   
   
        path:'/article',
        element:<Article />
    }
})
export default router