React路由的基础使用

React路由导航

路由导航的功能

• 为每个页面分配访问地址----路由词典
• 路由导航，从一个页面跳转到另外一个页面
• 跳转时传递参数

React生态中有两个路由导航模块

• React-Router-DOM：用于浏览器项目中：H5，网站
• Router-Navigation：用于没有浏览器的项目中：RN的原生APP

接下来就来看看这个包
资料下图

• 路由NPM仓库指南

• 官方文档

安装

npm i react-router-dom

** 安装完成后package.json中就会有**

** 添加好之后我们就可以添加路由了**

添加路由

• 使用时首先需要在index.js里面按需导入

  import { createBrowserRouter, RouterProvider } from 		"react-router-dom";
  // createBrowserRouter:创建路由对象
  // RouterProvider：挂载对象
  

• 然后创建一个路由对象

  // 创建路由器，包括词典
  let router = createBrowserRouter([
  	{
  		path: "路径以斜杆开头",
  		element: 组件简单名,
  	},
  	// 例如
  	{
  		path: "*",
  		element: <NoFound />,
  	},
  ]);
  

  但是在这之前需要以import的方式导入页面如上面的

  import NoFound from "./pages/NoFound";
  

挂载路由

上面我们说了创建路由对象之后现在我们是不能直接使用路由的所以我们是需要去挂载一下路由的
挂载路由我们需要使用上面引入的第二个方法了（ RouterProvider）
使用方式为

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<RouterProvider router={router} />
	</React.StrictMode>,
);