【React】路由的基础使用

2023-12-13 04:16:08

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

动态路由

1、安装依赖
npm i react-router-dom

默认安装最新版本的

2、在src/router/index.js
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
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} />
);

文章来源:https://blog.csdn.net/Handsome_gir/article/details/134864198
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。