React-router/react-router-dom学习指南（附代码）
React-router/react-router-dom学习指南（附代码）
目录
1. 快速入门
2. 基本组件
3. 服务器渲染
4. 代码拆分
5. 滚动恢复
6. 原理（动态路由/静态路由）
7. 测试
8. Redux 融合
9. 静态路由
1.快速入门
您需要一个React web应用程序来添加react -router。
如果你需要创建一个，最简单的方法就是使用一个叫做create React App的脚手架工具。
首先安装create- response -app(如果你还没有的话)，然后用它创建一个新项目。
npm install -g create-react-app
create-react-app demo-app
cd demo-app
安装
React Router DOM发布到npm，因此您可以使用npm或yarn安装它。npm安装react-router-dom
将下面的示例复制/粘贴到src/App.js中。
npm install react-router-dom
例子:基本的路由
在这个例子中，我们有3个由处理的“页面”组件。注意:我们使用 而不是。
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function Index() {
return Home
;
}
function About() {
return About
;
}
function Users() {
return Users
;
}
function AppRouter() {
return (
);
}
export default AppRouter;
!!!点击链接直接体验->：基本路由体验
例子:嵌套的路由
这个例子展示了嵌套路由是如何工作的。route /topics加载topics组件，该组件在路径上有条件地呈现任何进一步的:id值。
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function App() {
return (
);
}
function Home() {
return Home
;
}
function About() {
return About
;
}
function Topic({ match }) {
return Requested Param: {match.params.id}
;
}
function Topics({ match }) {
return (
Topics
-
Components
-
Props v. State
Please select a topic.
}
/>
);
}
function Header() {
return (
-
Home
-
About
-
Topics
);
}
export default App;
!!!点击链接直接体验->：基本路由体验
现在你可以开始练习了。路由快乐!
2. 基本组件
React Router中有三种类型的组件:路由器组件、路由匹配组件和导航组件。
web应用程序中使用的所有组件都应该从response -router-dom导入。
eg：
import { BrowserRouter, Route, Link } from "react-router-dom";
路由器
每个React路由器应用程序的核心都应该是一个路由器组件。对于web项目，response -router-dom提供了
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
,
holder
);
路由匹配
有两个路由匹配组件:< route >和
路由匹配是通过比较
您可以在任何你希望的位置包含
import { Route, Switch } from "react-router-dom";
// when location = { pathname: '/about' }
// renders // renders null
// renders
will be rendered */}
路由渲染属性
对于如何呈现给定
组件应该在您拥有现有组件时使用(可以是React)。要呈现的组件或无状态功能组件。render接受内联函数，仅当必须将范围内变量传递给要呈现的组件时才应使用。您不应该使用带有内联函数的组件支柱来传递范围内变量，因为您将获得不希望的组件卸载/重新加载。
const Home = () => Home;
const App = () => {
const someVariable = true;
return (
{/* these are good */}
);
};
导航
React Router提供一个组件来在应用程序中创建链接。无论在何处呈现，都会在应用程序的HTML中呈现一个来链接。
，当它的to prop匹配当前位置时，可以将自己设置为“active”。
任何时候您想强制导航，都可以呈现
Home
// Home
location.// location = { pathname: '/react' }
React
// React
3. 服务器渲染
4. 代码拆分
5. 滚动恢复
6. 原理（动态路由/静态路由)
7. 测试
8. Redux 融合
Redux是React生态系统的重要组成部分。我们希望使React Router和Redux的集成尽可能无缝，以满足用户对两者的需求。
阻塞更新
一般来说，React Router和Redux可以很好地协同工作。不过，有时应用程序的组件在位置发生变化时不会更新(子路由或活动导航链接不会更新)。
比如发生这样的情况:
- 组件通过connect()(Comp)连接到redux。
- 该组件不是一个“路由组件”，这意味着它不是这样呈现的:< route component={SomeConnectedThing}/>。
未完 待更新
9. 静态路由
静态路由
React Router的以前版本使用静态路由来配置应用程序的路由。这允许在呈现之前检查和匹配路由。由于v4转移到动态组件而不是路由配置，以前的一些用例变得不那么明显和棘手。
我们正在开发一个包来处理静态路由配置和React路由器，以继续满足这些用例。它正在开发中，但我们希望你能尝试一下，并提供帮助。
路由配置链接 点击跳转：React router config