当前位置：首页 > article >正文

React js Router 路由 2, (把写过的几个 app 组合起来)

article 2024/11/15 12:23:41

完整的项目，我已经上传了，资源链接.

起因，目的:

每次都是新建一个 react 项目，有点繁琐。
刚刚学了路由，不如写一个 大一点的 app ，把前面写过的几个 app, 都包含进去。

这部分感觉就像是， django 里面的 createapps,
一个项目，包含多个独立的app。

过程，先看效果图:

在这里插入图片描述

代码 1 , 当前 app 的路由设置

import { Route, Routes, Link } from "react-router-dom";
import Home from "./pages/Home.jsx";
import About from "./pages/About.jsx";
import Books from "./pages/Books.jsx";
import NewBook from "./pages/NewBook.jsx";

import TodoApp from "./todoApps/TodoApp.jsx";
import NasaApp from "./nasaApps/NasaApp.jsx";
import FormApp from "./formApps/FormApp.jsx";

function App() {
  return (
    <>
      {/* 使用 Link 替代 href */}
      {/* 这里的名称一定要对应！！！ */}

      {/* 为什么下面这2个不能用？ */}
      {/* 因为最下面的 Routes 中没有添加！  */}

      <nav className="navbar navbar-dark bg-primary" data-bs-theme="dark">

        <ul className="nav">
          <li className="nav-item">
            <a className="nav-link active" aria-current="page" href="/">
              Home
            </a>
            {/* <Link to="/">Home</Link> */}
          </li>
          <li className="nav-item">
            <a className="nav-link" href="/about">
              About
            </a>
          </li>

          <li className="nav-item">
            <a className="nav-link" href="/books">
              Books
            </a>
          </li>

          <li className="nav-item">
            <Link to="/newBook">
              <a className="nav-link" href="#">
                NewBook
              </a>
            </Link>
          </li>

        </ul>
      </nav>

      {/* <nav>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>

          <li>
            <Link to="/books">Books</Link>
          </li>
         
          <li>
            <Link to="/newBook">NewBook</Link>
          </li>

          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
      </nav> 
      
      */}

      {/* 这里的路径 path="/books",  */}
      {/* 与上面的 Link 中 to=xxx 对应 */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/books" element={<Books />} />
        <Route path="/about" element={<About />} />
        <Route path="/newBook" element={<NewBook />} />

        {/* 带 id 的路由 , :id 是一个占位符， */}
        {/* 访问: http://localhost:5173/books/321 */}
        <Route path="/books/:id" element={<Books />} />


        {/* 访问其他几个 app  */}
        <Route path="/todo" element={<TodoApp />} />
        <Route path="/nasa" element={<NasaApp />} />
        <Route path="/form" element={<FormApp />} />


      </Routes>
    </>
  );
}

export default App;