1.react路由的基本使用

第一步

首先打开index.js，在里面引入BrowserRouter或者HashRouter，启用全局路由模式。

BrowserRouter与HashRouter的区别

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
  BrowserRouter,
  // HashRouter
} from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  
    
      
    
  
);

reportWebVitals();

第二部

然后在scr目录下创建pages文件夹，主要用于存放页面

第三步

然后我们打开app.js文件 引入Link, Route,Routes这几个api

Link	作用 ：用于指定导航链接，完成路由跳转 语法说明： 组件通过to属性指定路由地址，最终会渲染为a链接元素
Route	作用 ：用于指定导航链接，完成路由匹配 语法说明： path属性指定匹配的路径地址，element属性指定要渲染的组件 说明：当url路径为 ‘/about’ 时，会渲染 组件
Routes	作用 ：提供一个路由出口，满足条件的路由组件会渲染到组件内部，定义path和组件的对应关系

 

 

然后在引入所需要的页面

// App.js
import './App.css';
import { Link, Route,Routes  } from 'react-router-dom';    // 路由插件
 
 import HOME from "./pages/home";
 import ABOUT from "./pages/about";
 
function App() {
  return (
    

		首页
		分类
		

		
			}>
			}>
		
    
  );
}
 
export default App;

这样一个简单的路由就实现了