【React】路由的基础使用

哇，女前端哎！2023-12-08 16:26

react-router-dom@6的基础使用

1、安装依赖

javascript 复制代码

npm i react-router-dom

默认安装最新版本的

2、在src/router/index.js

javascript 复制代码

import { createBrowserRouter } from "react-router-dom"

/* 
	createBrowserRouter：[/home]--h5路由
	createHashRouter：[/#/home]--哈希路由
 */

const router=createBrowserRouter([
	{
		path:"/login",
		element:<div>登录页</div>
	},
	{
		path:"/",
		element:<div>首页</div>
	},
	{
		path:"/mine",
		element:<div>我的</div>
	},
	{
		path:"*",
		element:<div>404</div>
	}
])

// element里可以替换成自己写的组件

export default router

3、在src/index.js

javascript 复制代码

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

import { RouterProvider } from "react-router-dom"

import router from "./router/index.js"

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