React Router

报错分析： 在浏览器内可以从首页跳转到其他路由地址，而不报错是因为这些是由前端自己渲染的。React Router定义的对应路由，脚本并没有刷新访问请求后台数据，是JS动态更改的location。 当刷新时，先访问的是后台地址，反馈数据后再加载页面内的React代码，最后才在浏览器内执行，这时报错404。是因为后台并没有针对这个过程的路由给出返回的HTML内容，就没有执行React-Router。 只需要把原来的BrowserRouter替换成HashRouter,这样所有的请求都会定位在index.html页面，服务器端就不需要做任何的配置了。 路由控制为BrowserRouter时，URL是指向真实URL的资源路径，当通过真实URL路径访问网站时，由于路径是指向服务器的真实路径，而该路径下并没有相关的资源，所以访问时就报错404. 在React项目中采用React-Router来配置页面路由时，React-Router是建立在history基础上，常见的history路由方案有三种形式： 1、hashHistory 2、browserHistory 3、createMemoryHisory 在本地开发时使用BrowserRouter是不出现问题的，因为在webpack.config.js中使用了webpack-dev-server就已经做好了配置。 BrowserRouter：

点击上方“前端自习课”关注，学习起来~ 作者：陈俊宇 https://github.com/CJY0208 什么是状态保存？ 假设有下述场景： 移动端中，用户访问了一个列表页，上拉浏览列表页的过程中，随着 滚动高度 逐渐增加，数据也将采用触底 分页加载 的形式逐步增加，列表页浏览到某个位置，用户看到了感兴趣的项目，点击查看其详情，进入详情页， 从详情页退回列表页时，需要停留在离开列表页时的浏览位置上 类似的数据或场景还有 已填写但未提交的表单 、 管理系统中可切换和可关闭的功能标签 等，这类数据随着用户交互逐渐变化或增长，这里理解为 状态 ，在交互过程中，因为某些原因需要临时离开交互场景，则 需要对状态进行保存 在 React 中，我们通常会使用 路由 去管理不同的页面，而在切换页面时，路由将会卸载掉未匹配的页面组件，所以上述列表页例子中， 当用户从详情页退回列表页时，会回到列表页顶部，因为列表页组件被路由卸载后重建了，状态被丢失 如何实现 React 中的状态保存 在 Vue 中，我们可以非常便捷地通过 <keep-alive> [1] 标签实现状态的保存，该标签会缓存不活动的组件实例，而不是销毁它们 而在 React 中并没有这个功能,曾经有人在官方提过功能 issues [2] ，但官方认为这个功能容易造成内存泄露，表示暂时不考虑支持，所以我们需要自己想办法了 常见的解决方式

问题： With react-router I can use the Link element to create links that are natively handled by react router. 通过 react-router 我可以使用 Link 元素来创建由react路由器本地处理的链接。 I see internally it calls this.context.transitionTo(...) . 我在内部看到它调用 this.context.transitionTo(...) 。 I want to do a navigation, but not from a link, from a dropdown selection for example. 我想从下拉列表中进行导航，而不是从链接进行导航。 How can I do this in code? 如何在代码中执行此操作？ What is this.context ? 这是什么 this.context ？ I saw the Navigation mixin, but can I do this without mixins? 我看到了 Navigation 混合器，但是没有混合器可以做到吗？ 解决方案： 参考一： https://stackoom.com/question/26P5V

1.常用轮子分析 react-live-route -- 重写可以实现我们想要的功能，但成本也比较高，需要注意对原始 <Route> 功能的保存，以及多个 react-router 版本的兼容 185 react-keeper -- 完全替换掉路由方案是一个风险较大的事情，需要较为慎重地考虑 716 react-router-cache-route -- 由于不再是组件卸载，所以和 TransitionGroup 配合得不好，导致转场动画难以实现 492 react-activation -- 其 children 属性抽取出来，渲染到一个不会被卸载的组件内 245 react-keep-alive -- 真实 KeepAlive 功能的实现 438 2. 来源： oschina 链接： https://my.oschina.net/u/4383141/blog/4286939

安装项目 安装全局yarn npm i yarn -g // 安装项目 npx create-react-app 你的项目名 --template typescript 进入项目目录 cd 你的项目名 安装需要的支持库(redux,react-router-dom) yarn add redux react-redux@types/react-redux -S yarn add react-router-dom @types/react-router-dom -S 安装需要的第三库(antd,babel-plugin-import,axios,mockjs) yarn add babel-plugin-import -D yarn add antd axios mockjs -S node-sass yarn add node-sass 配置babel文件–antd // .babelrc { "plugins" : [ [ "import" , { "libraryName" : "antd" , "libraryDirectory" : "es" , "style" : "css" // `style: true` 会加载 less 文件 } ] ] } 配置mobx—不需要 yarn add mobx mobx-react -s yarn add @babel/plugin

元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。 const element = <h1>Hello, world!</h1>; 与浏览器的 DOM 元素不同，React 当中的元素事实上是普通的对象，React DOM 可以确保 浏览器 DOM 的数据内容与 React 元素保持一致。 将元素渲染到 DOM 中 首先我们在一个 HTML 页面中添加一个 id="example" 的 <div> : <div id="example"></div> 在此 div 中的所有内容都将由 React DOM 来管理，所以我们将其称为 "根" DOM 节点。 我们用 React 开发应用时一般只会定义一个根节点。但如果你是在一个已有的项目当中引入 React 的话，你可能会需要在不同的部分单独定义 React 根节点。 要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上： const element = <h1>Hello, world!</h1>; ReactDOM.render( element, document.getElementById('example') ); 更新元素渲染 React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。

ZooTeam 前端周刊｜第 82 期 浏览更多往期小报，请访问： weekly.zoo.team Cherry-Pick | 一日一 Git - 掘金 Cherry-Pick 该 Git 命令能优雅的满足你将任一节点移植到指定分支的需求，还可以妙用于 CodeStream 。 React Router原理 - 简书 原文地址 blog.poetries.top/2018/12/20/… 一、React Router基础之history... React 学习之路由HashRouter和BrowserRouter - leahtao - 博客园 React 学习之路由HashRouter和BrowserRouter - leahtao - 博客园 前端走进机器学习生态，在 Node.js 中使用 Python 从今天开始，你就可以开始看着 Python 的文档，使用 JavaScript 来“学习和使用”机器学习和深度学习了！ (77) 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇 - 掘金 写在开头 微前端系列文章： 基于 qiankun 的微前端最佳实践（万字长文） - 从 0 到 1 篇 基于 qiankun 的微前端最佳实践（图文并茂） - 应用间通信篇 万字长文+图文并茂+全面解析微前端框架 qiankun 源码 - qiankun 篇...

Hooks 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 使用 React hooks 转化 class 的一些思考   Hooks 其实已经是大势所趋的一个技术了，作为一个可能是 React，甚至是 JS 史上都是一个比较伟大的发明，Hooks 已经被大部分中小型公司所接受并尝试使用，但是对于大中型公司来讲，从 class 组件移植 Hooks 的成本太高，不能像其他公司一样随心所欲地拥抱新技术，所以我们对于 Hooks 的讨论，应该考虑的比较全面，才能更好的了解这个技术，以及是否应该在项目中尝试这一新技术。   在论坛上我也有和一个小伙伴对此有一个讨论，感谢@无怨，前代 react 项目 class 转 hooks 的必要性。其实大家对 hook 都是认可的，但是对于重写 class 的成本方面还是望而却步的，react 官方也不希望因为这个使得新版本使用者剧减，所以暂时还是会兼容 class 组件的写法。   所以其实对于是重写部分还是只有新组件使用 hook，大家都还是比较犹豫的，对这种选择来看，我们必须实际考虑成本-产出比，所以我们这篇就具体讨论成本与产出，以及可行的方案吧~ 首先咱们来看看成本吧 修改成本   作为 React 16.8 新增特性，一些第三方的库可能还暂时无法兼容

https://reactrouter.com/ npx create-react-app demo yarn add react-router-dom 这样想试试新功能的话只需要新建组件即可, 不需要新建项目 import React from "react"; import "./App.css"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import A1 from "./components/A1"; const routes = [{ path: "/A1", component: A1 }]; function App() { return ( <div className="App"> <Router> {routes.map(({ path }) => ( <Link key={path} to={path}> {path} </Link> ))} <Switch> {routes.map(({ path, component }) => ( <Route exact key={path} component={component} path={path}></Route> ))} </Switch> </Router> </div> ); }

一、脚手架搭建react结构目录： 1、npm install -g create-react-app 全局安装react脚手架 2、create-react-app react-demo 创建react-demo项目 3、cd react-demo 进入到项目文件夹 4、npm start 启动本地项目 二、Styled-Components与Reset.css的结合使用. Styled-Components解决css样式表不能私有的问题，且可以将组件与样式结合，方便构建小组件。Reset.css重置不同浏览器标签默认设置 三、React-Redux进行应用数据的管理 有些组件的数据，你认为是只有该组件要用，但是随着项目不断扩展，说不定其他组件也要用，这时候既然用了React-Redux管理数据，就是要将所有的数据都交给其管理 React-Redux和Redux这两个包都是结合使用的，React-Redux有个Provider核心组件，这点注意 四、combineReducers完成对数据的拆分管理 项目越大，reducer.js代码越多，所以构建项目时候就先要进行拆分处理 五、actionCreators与constants的拆分 action对象的创建，acitonType的常量都要单独写在一个文件中进行管理 六、使用Immutable.js来管理store中的数据