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

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

起因, 目的:

每次都是新建一个 react 项目,有点繁琐。

刚刚学了路由,不如写一个 大一点的 app ,把前面写过的几个 app, 都包含进去。

这部分感觉就像是, django 里面的 createapps,

一个项目, 包含多个独立的app。

过程, 先看效果图:

代码 1 , 当前 app 的路由设置
js 复制代码
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;

其他几个页面的效果图

todo app
nasa
表单 form

结论 + todo

其实问题还是很多的。

  1. react 自带的标签, <Link>, 如何给这个标签添加 boostrap css 样式
  2. 多个app 组合,复杂度增加,如何排除错误。进一步学习 chrome devtools 使用技巧。

老哥,支持一下啊。

相关推荐
mCell16 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip16 小时前
Node.js 子进程:child_process
前端·javascript
excel19 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel20 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼21 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping21 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript