网页制作与网站开发...,网站网页设计在哪找,浙江短视频seo优化网站,深圳十大装修公司品牌排行榜完整的项目#xff0c;我已经上传了#xff0c;资源链接.
起因#xff0c; 目的:
每次都是新建一个 react 项目#xff0c;有点繁琐。 刚刚学了路由#xff0c;不如写一个 大一点的 app #xff0c;把前面写过的几个 app, 都包含进去。
这部分感觉就像是#xff0c; …完整的项目我已经上传了资源链接.
起因 目的:
每次都是新建一个 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 classNamenavbar navbar-dark bg-primary data-bs-themedarkul classNamenavli classNamenav-itema classNamenav-link active aria-currentpage href/Home/a{/* Link to/Home/Link */}/lili classNamenav-itema classNamenav-link href/aboutAbout/a/lili classNamenav-itema classNamenav-link href/booksBooks/a/lili classNamenav-itemLink to/newBooka classNamenav-link href#NewBook/a/Link/li/ul/nav{/* navulliLink to/Home/Link/liliLink to/booksBooks/Link/liliLink to/newBookNewBook/Link/liliLink to/aboutAbout/Link/li/ul/nav */}{/* 这里的路径 path/books, */}{/* 与上面的 Link 中 toxxx 对应 */}RoutesRoute 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
其实问题还是很多的。
react 自带的标签 Link, 如何给这个标签添加 boostrap css 样式多个app 组合复杂度增加如何排除错误。进一步学习 chrome devtools 使用技巧。
老哥支持一下啊。
