react中简单的配置路由

℘团子এ2024-07-23 16:29

1.安装react-router-dom

javascript 复制代码

npm install react-router-dom

2.新建文件

src下新建page文件夹，该文件夹下新建login和index文件夹用于存放登录页面和首页，再在对应文件夹下分别新建入口文件index.js；

src下新建router文件用于存放路由配置文件，该文件夹下新建入口文件index.js;

3.实现过程

3.1页面的编写

src/page/index/index.js

javascript 复制代码

function IndexPage() {
  return (
    <div>
      欢迎来到index
    </div>
  );
}

export default IndexPage;

src/page/login/index.js

javascript 复制代码

function LoginPage() {
  return (
    <div>
      欢迎来到login
    </div>
  );
}

export default LoginPage;

3.2路由文件配置

src/router/index.js

javascript 复制代码

// 1.引入方法，用于创建路由实例
import { createBrowserRouter } from 'react-router-dom' 

// 2.引入组件
import LoginPage from '../page/login';
import IndexPage from '../page/index';

// 3.创建router实例，配置路由
const router = createBrowserRouter([ 
  {
    path:"/login", // 路由路径
    element:<LoginPage></LoginPage> // 渲染页面的地方
  },
  {
    path:"/index",
    element:<IndexPage></IndexPage>
  },
  {
    path:"",
    element:<div>欢迎来到首页</div>
  }
])

// 4.暴露路由实例，用于在App.js主入口组件
export default router;

3.3路由绑定

javascript 复制代码

import React, { useState, useRef, useEffect, useContext, createContext } from 'react';
// 1.引入
import { RouterProvider } from 'react-router-dom'
import router from './router';



function App() {
  return (
    <div>
      {/* 2.绑定 */}
      <RouterProvider router={router}></RouterProvider>
    </div>
  );
}

export default App;

4.最终效果