react中简单的配置路由

1.安装react-router-dom

npm install react-router-dom

2.新建文件

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

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

3.实现过程

3.1页面的编写

src/page/index/index.js

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

src/page/login/index.js

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

3.2路由文件配置

src/router/index.js

// 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路由绑定

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.最终效果