React-Router

download：React18+TS 通用后盾管理系统解决方案落地实战React 18+TS的基本概念TypeScriptTypeScript是一种动态类型的编程语言，它可能在编译时查看代码中的类型谬误，从而提高代码的可读性和可维护性1。TypeScript还支持ES6+的新个性，如类，模块，箭头函数，解构赋值等，使得代码更加简洁和现代化1。 TypeScript可能与React框架无缝集成，只需要安装相应的类型定义文件即可。例如，要使用React 18+TS开发利用，可能执行以下命令： npm install --save react@next react-dom@nextnpm install --save-dev typescript @types/react @types/react-dom这样就可能在.ts或.tsx文件中使用React和TypeScript了。 React 18React 18是React框架的最新版本，它蕴含了一些重大的更新和改进2。其中最引人瞩目的是Server Components，它可能让开发者在服务器端渲染组件，并将后果发送给客户端3。这样可能缩小客户端的代码量和网络传输量，提高利用的加载速度和响应速度3。 另一个重要的个性是Suspense，它可能让开发者在组件中申明数据依赖，并在数据加载时浮现一个占位符4。这样可能避免组件在渲染过程中出现闪动或空白的情况，提高用户体验4。 还有一个值得关注的个性是Concurrent Rendering，它可能让React在后盾渲染更新，并在合适的时机浮现给用户5。这样可能避免长时间的渲染工作阻塞用户交互，提高利用的流畅度和稳定性5。 要使用React 18+TS开发利用，需要配置一些实验性的个性。例如，在tsconfig.json文件中增加以下内容： { "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "react", "experimentalDecorators": true, "useDefineForClassFields": true }}这样就可能在.tsx文件中使用JSX语法，并启用装璜器和类字段等个性了。 React 18+TS的劣势使用React 18+TS开发前端利用有以下几个劣势： 可能利用TypeScript的类型零碎和ES6+的新个性，编写更加健壮、简洁和现代化的代码。可能利用React 18的新个性，如Server Components, Suspense, Concurrent Rendering等，提高利用的性能和用户体验。可能享受React生态系统中丰富的资源和工具，如 Create React App, Next.js, React Router, Redux, Material UI等，疾速搭建和部署利用。 React 18+TS在线教育平台示例为了展示如何使用React 18+TS构建一个在线教育平台，简略实现一个前端页面，浮现课程列表和课程详情。 首先，咱们需要创建一个React 18+TS我的项目，可能使用Create React App工具，执行以下命令： npx create-react-app react18-ts-edu --template typescriptcd react18-ts-edunpm start这样就可能在阅读器中看到一个默认的页面了。 接下来，咱们需要安装一些依赖库，如GraphQL, Apollo Client, Material UI等，执行以下命令： ...

指标实现成果：拦挡路由变动做自定义解决，比方在一个表单尚未填写实现，用户就要来到以后页面此时须要给用户做一个揭示，如下图所示 先说一下背景常识：React-router 是由三个库一起组成的 history、react-router、react-router-dom 咱们平时须要用到的是 react-router-dom v5 版本实现路由拦挡以前在应用 v5 版本时，是这样实现路由拦挡的 // 文档：https://v5.reactrouter.com/core/api/Prompt <Prompt when={boolean} // 组件何时激活 message={(location, action) => { // 做一些拦挡操作 location 要返回的路由，此时能够先保留下来后续应用 // return false 勾销跳转 比方此时弹起一个自定义弹窗， // return true 容许跳转 }} />v6 版本实现v6 版本没有了 Prompt 组件，Google 搜寻之后找到了这个 stackoverflow v6 beta 时提供了两个 hooks useBlocker/usePrompt 能够用来实现路由拦挡，然而到正式版的时候这两个 hook 就被移除了，这个 issue 外面有探讨，这里有人找出了解决方案就是把删除的这两个 hooks 再加回去 其实路由拦挡性能次要是用到了 history 库外面的 block 办法，这里是相干代码histoy block 文档 history.block will call your callback for all in-page navigation attempts, but for navigation that reloads the page (e.g. the refresh button or a link that doesn't use history.push) it registers a beforeunload handler to prevent the navigation. In modern browsers you are not able to customize this dialog. Instead, you'll see something like this (Chrome):简略的翻译下就是 histoy.block 会阻止页面中的所有导航并调用callback，然而间接敞开 tab 页或是刷新会注册 beforeunload 事件继而触发浏览器的默认询问弹窗，不反对去除默认弹框，我上面采纳了一种 hack 的方法来去除 默认询问弹框残缺代码 ...

找到httpd.conf配置文件（/usr/local/apache2/conf）进入编辑找到#LoadModule rewrite_module modules/mod_rewrite.so这一行并勾销正文找到所有的AllowOverride，将默认值none批改为All（大概有三处，不要漏）在我的项目根目录（/usr/local/apache2/htdocs）新建.htaccess文件，输出以下内容：<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]</IfModule>保留后退出。 重启http容器

React-router 是 react js 中路由的规范库。它容许 React 应用程序的用户在应用程序的不同局部（组件）之间挪动。 react-router 团队 发表将 在 2021 年底公布react-router 版本 6 (v6) 的稳固版本，但因为一些重大的 API 更改，从 react-router 版本 5 (v5) 切换到 v6 可能会很艰难. 在本文中，咱们将介绍 v6 中的新性能以及如何将现有的 React 我的项目从 v5 降级到 v6。 要在咱们的应用程序中降级 react-router 包的版本，咱们导航到我的项目文件夹并运行 npm install react-router-dom@[VERSION_NUMBER]替换VERSION_NUMBER为咱们要装置的版本，或者如果咱们想要最新版本，则替换为“ latest ”，如下所示： npm install react-router-dom@6或者 npm install react-router-dom@latest请留神，咱们必须连贯到互联网能力实现装置，否则装置将失败。另外，请确保我的项目中的 react 版本是 v16.8 或更高版本，因为 react-router v6 重大依赖于 react v16.8 最后反对的钩子 Switch 被替换为 Routesv5 时代的第一个被代替的是Switch组件。该Switch组件用于包装咱们的路由，它确保每次只加载一个匹配的路由。但这在 v6 中不再存在。咱们应用Routes组件来替换Switch。请留神，咱们依然须要导入BrowserRouter包装咱们的应用程序，就像在 v5 中所做的那样。 在 v5 中，咱们是这样做： ...

在react 中,路由重定向的外围就是Redirect和Switch ,不论是单层路由还是多层 import { HashRouter,BrowserRouter, Route,Router, Link, Redirect, Switch} from "react-router-dom";import Header from './components/Header';import Login from './page/Login/index';import Register from './page/Login/register';import RemakePassWord from './page/Login/remakePassWord';import HomeIndex from './page/Login/HomeIndex';import List from './page/Login/List';import Error from './page/Login/Error';const App=() =>{ return ( <div className="App"> <BrowserRouter>{/* 哈希router还是Browser随需要*/} <Header/> <Switch> {/* 想要重定向匹配精确 Switch必须加 Switch只显示匹配到的第一个路由*/} <Route exact path="/" component={Login} /> <Route path="/register" component={Register} /> <Route path="/remakePassWord" component={RemakePassWord} /> {/* 一层路由重定向 重定向到Login */} <Redirect to="/" /> {/*二层路由*/} <Route path="/main" > <Switch>{/*二层想要重定向精确 二层Switch也是必须加的 */} <Route path="/main/homeIndex" component={HomeIndex} /> <Route path="/main/list" component={List} /> <Route path="/main/404" component={Error} /> {/* 二层路由重定向 重定向到Error页面 写/main/404和404都行 */} <Redirect to="/main/404" /> </Switch> </Route> </Switch> </BrowserRouter> </div> );}...export default App;