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

老哥,支持一下啊。

相关推荐
群联云防护小杜10 分钟前
深度隐匿源IP:高防+群联AI云防护防绕过实战
运维·服务器·前端·网络·人工智能·网络协议·tcp/ip
DanB2423 分钟前
html复习
javascript·microsoft·html
汉得数字平台28 分钟前
【鲲苍提效】全面洞察用户体验,助力打造高性能前端应用
前端·前端监控
花海如潮淹35 分钟前
前端性能追踪工具:用户体验的毫秒战争
前端·笔记·ux
_丿丨丨_5 小时前
XSS(跨站脚本攻击)
前端·网络·xss
天天进步20156 小时前
前端安全指南:防御XSS与CSRF攻击
前端·安全·xss
呼啦啦呼啦啦啦啦啦啦6 小时前
利用pdfjs实现的pdf预览简单demo(包含翻页功能)
android·javascript·pdf
拾光拾趣录8 小时前
括号生成算法
前端·算法
拾光拾趣录9 小时前
requestIdleCallback:让你的网页如丝般顺滑
前端·性能优化
前端 贾公子9 小时前
vue-cli 模式下安装 uni-ui
前端·javascript·windows