笔记十七、认识React的路由插件react-router-dom和基本使用

react-router 分类
web使用
react-router-dom
native使用
react-router-native
anywhere（使用麻烦）
react-router

安装

yarn add react-router-dom

 main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { BrowserRouter } from "react-router-dom";ReactDOM.createRoot(document.getElementById("root")).render(<React.StrictMode><BrowserRouter><App text={"react"} /></BrowserRouter></React.StrictMode>
);

App.jsx

import React from "react";
import About from "./components/About";
import Home from "./components/Home";
import { Link, Route, Routes } from "react-router-dom";
import "./app.css";class App extends React.Component {render() {return (<div className="all"><div><div className="link"><Link to="/home">打开首页的页面</Link></div><div className="link"><Link to="/about">打开关于的页面</Link></div></div><div className="view"><Routes><Route path="/about" element={<About />} /><Route path="/home" element={<Home />} /></Routes></div></div>);}
}
export default App;

文件目录结构