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

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

news 2025/7/13 1:11:16

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

起因，目的:

每次都是新建一个 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;