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(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

reportWebVitals();

第二部

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

第三步

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

Link	作用 ：用于指定导航链接，完成路由跳转 语法说明： 组件通过to属性指定路由地址，最终会渲染为a链接元素
Route	作用 ：用于指定导航链接，完成路由匹配 语法说明： path属性指定匹配的路径地址，element属性指定要渲染的组件 说明：当url路径为 ‘/about’ 时，会渲染<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 (
    <div>
		<Link to='/home'>首页</Link>
		<Link to='/about'>分类</Link>
		<br />
		<Routes>
			<Route path='/home' element={<HOME />}></Route>
			<Route path='/about' element={<ABOUT />}></Route>
		</Routes>
    </div >
  );
}
 
export default App;

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