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

素颜马尾好姑娘i 2024-05-01 16:23 48阅读 0赞

> 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;

文件目录结构

![59dfdd4e8c964d0f8b45d6ccedbd536d.png][]

[59dfdd4e8c964d0f8b45d6ccedbd536d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/01/4a1f2e14337d42098e558d90e5ecd6bd.png