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 使用技巧。

老哥,支持一下啊。

相关推荐
全栈技术负责人12 分钟前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw521 分钟前
移动端调试上篇
前端
伍哥的传说24 分钟前
Lodash-es 完整开发指南:ES模块化JavaScript工具库实战教程
大数据·javascript·elasticsearch·lodash-es·javascript工具库·es模块·按需导入
@菜菜_达25 分钟前
Lodash方法总结
开发语言·前端·javascript
GISer_Jing30 分钟前
低代码拖拽实现与bpmn-js详解
开发语言·javascript·低代码
YAY_tyy35 分钟前
基于 Vue3 + VueOffice 的多格式文档预览组件实现(支持 PDF/Word/Excel/PPT)
前端·javascript·vue.js·pdf·word·excel
Yvonne爱编码1 小时前
AJAX入门-AJAX 概念和 axios 使用
前端·javascript·ajax·html·js
在路上`1 小时前
前端学习之后端java小白(三)-sql外键约束一对多
java·前端·学习
Pu_Nine_92 小时前
10 分钟上手 ECharts:从“能跑”到“生产级”的完整踩坑之旅
前端·javascript·echarts·css3·html5
東雪蓮☆3 小时前
从零开始掌握 Web 与 Nginx:入门详解
运维·服务器·前端·nginx