笔记十七、认识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(
  
    
      
    
  
);

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 (
      

        

          

            打开首页的页面
          
          

            打开关于的页面
          
        
        

          
            } />
            } />
          
        
      
    );
  }
}
export default App;

文件目录结构