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

ElendaLee2023-11-28 13:42

react-router 分类

web使用

react-router-dom

native使用

react-router-native

anywhere（使用麻烦）

react-router

安装

bash 复制代码

yarn add react-router-dom

main.jsx

javascript 复制代码

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

javascript 复制代码

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;

文件目录结构