add:React路由的使用
This commit is contained in:
qianguyihao
parent
bea986b4c7
commit
4f258bfcad
@ -58,7 +58,53 @@ Warning: Failed prop type: You provided a `value` prop to a form field without a
|
||||
<input type="text" value={this.state.msg} readOnly />
|
||||
```
|
||||
|
||||
绑定 onChange 的举例如下：（通过onChange方法，实现双向数据绑定）
|
||||
**绑定 onChange 的举例如下**：（通过onChange方法，实现双向数据绑定）
|
||||
|
||||
(1)index.html:
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
|
||||
（2）main.js:
|
||||
|
||||
```javascript
|
||||
// JS打包入口文件
|
||||
// 1. 导入包
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
// 导入组件
|
||||
import MyComponent from "./components/MyComponent.jsx";
|
||||
|
||||
// 使用 render 函数渲染 虚拟DOM
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<MyComponent></MyComponent>
|
||||
</div>,
|
||||
document.getElementById("app")
|
||||
);
|
||||
|
||||
```
|
||||
|
||||
（3）components/MyComponent.jsx
|
||||
|
||||
```javascript
|
||||
import React from "react";
|
||||
@ -103,3 +149,17 @@ export default class MyComponent extends React.Component {
|
||||
```
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
- [2019-02-13-ReactDemo.zip]()
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
249
13-React基础/07-React路由的使用.md
Normal file
249
13-React基础/07-React路由的使用.md
Normal file
@ -0,0 +1,249 @@
|
||||
|
||||
## React路由的使用
|
||||
|
||||
使用React路由之前，我们需要先安装 `react-router-dom`这个包。比如：
|
||||
|
||||
```
|
||||
yarn add react-router-dom
|
||||
```
|
||||
|
||||
代码举例：
|
||||
|
||||
（1）index.html
|
||||
|
||||
```html
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
|
||||
<div id="app"></div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
```
|
||||
|
||||
（2）main.js：
|
||||
|
||||
```javascript
|
||||
// JS打包入口文件
|
||||
// 1. 导入包
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
|
||||
import App from "./App.jsx";
|
||||
|
||||
// 使用 render 函数渲染 虚拟DOM
|
||||
ReactDOM.render(<App />, document.getElementById("app"));
|
||||
|
||||
```
|
||||
|
||||
（3）app.jsx:
|
||||
|
||||
```java
|
||||
import React from "react";
|
||||
|
||||
// 如果要使用 路由模块，第一步，运行 yarn add react-router-dom
|
||||
// 第二步，导入 路由模块
|
||||
|
||||
// HashRouter 表示一个路由的跟容器，将来，所有的路由相关的东西，都要包裹在 HashRouter 里面，而且，一个网站中，只需要使用一次 HashRouter 就好了；
|
||||
// Route 表示一个路由规则， 在 Route 上，有两个比较重要的属性， path component
|
||||
// Link 表示一个路由的链接 ，就好比 vue 中的 <router-link to=""></router-link>
|
||||
import { HashRouter, Route, Link } from "react-router-dom";
|
||||
|
||||
import Home from "./components/Home.jsx";
|
||||
import Movie from "./components/Movie.jsx";
|
||||
import About from "./components/About.jsx";
|
||||
|
||||
export default class App extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
// 当 使用 HashRouter 把 App 根组件的元素包裹起来之后，网站就已经启用路由了
|
||||
// 在一个 HashRouter 中，只能有唯一的一个根元素
|
||||
// 在一个网站中，只需要使用 唯一的一次 <HashRouter></HashRouter> 即可
|
||||
return (
|
||||
<HashRouter>
|
||||
<div>
|
||||
<h1>这是网站的APP根组件</h1>
|
||||
<hr />
|
||||
|
||||
<Link to="/home">首页</Link>
|
||||
<Link to="/movie">电影</Link>
|
||||
<Link to="/about">关于</Link>
|
||||
<hr />
|
||||
|
||||
{/* Route 创建的标签，就是路由规则，其中 path 表示要匹配的路由，component 表示要展示的组件 */}
|
||||
{/* 在 vue 中有个 router-view 的路由标签，专门用来放置，匹配到的路由组件的，但是，在 react-router 中，并没有类似于这样的标签，而是 ，直接把 Route 标签，当作的 坑（占位符） */}
|
||||
{/* Route 具有两种身份：1. 它是一个路由匹配规则； 2. 它是 一个占位符，表示将来匹配到的组件都放到这个位置 */}
|
||||
<Route path="/home" component={Home} />
|
||||
<hr />
|
||||
<Route path="/movie" component={Movie} />
|
||||
<hr />
|
||||
<Route path="/about" component={About} />
|
||||
</div>
|
||||
</HashRouter>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
（4）ReactDemo/src/components/Home.jsx
|
||||
|
||||
```java
|
||||
import React from "react";
|
||||
|
||||
export default class Home extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Home组件</div>;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
（5）ReactDemo/src/components/Movie.jsx
|
||||
|
||||
```java
|
||||
|
||||
import React from "react";
|
||||
|
||||
export default class Movie extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>Movie组件</div>;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
（6）ReactDemo/src/components/About.jsx
|
||||
|
||||
```java
|
||||
import React from "react";
|
||||
|
||||
export default class About extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
render() {
|
||||
return <div>About组件</div>;
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
运行结果：
|
||||
|
||||
20190214_1000.png
|
||||
|
||||
## 匹配路由参数
|
||||
|
||||
### 模糊匹配与精准匹配
|
||||
|
||||
我们在上面的代码中，进一步修改。假设 Movie 这个组件修改成这种路由匹配方式：
|
||||
|
||||
```html
|
||||
<Link to="/movie/top250">电影</Link>
|
||||
|
||||
<Route path="/movie" component={Movie} />
|
||||
|
||||
```
|
||||
|
||||
上面这种匹配方式，也是可以成功匹配到的。这是为啥呢？
|
||||
|
||||
这是因为：默认情况下，路由中的匹配规则，是**模糊匹配**的。如果 路由可以部分匹配成功，就会展示这个路由对应的组件。
|
||||
|
||||
如果想让路由规则，进行**精确匹配**，可以为Route添加 `exact` 属性。比如下面这种写法，因为是开启了精准匹配，所以是匹配不到的：（无法匹配）
|
||||
|
||||
```html
|
||||
<Link to="/movie/top250/20">电影</Link>
|
||||
|
||||
<Route path="/movie/" component={Movie} exact/>
|
||||
```
|
||||
|
||||
|
||||
另外，如果要匹配参数，可以在匹配规则中，使用 `:` 修饰符，表示这个位置匹配到的是参数。举例如下：（匹配正常）
|
||||
|
||||
```html
|
||||
<Link to="/movie/top250/20">电影</Link>
|
||||
|
||||
<Route path="/movie/:type/:id" component={Movie} exact/>
|
||||
```
|
||||
|
||||
|
||||
### 获取路由参数
|
||||
|
||||
继续修改上面的代码。如果我想在 Movie 组件中显示路由中的参数，怎么做呢？
|
||||
|
||||
我们可以通过 `props.match.params`获取路由中的参数。举例做法如下：
|
||||
|
||||
app.jsx中的匹配规则如下：
|
||||
|
||||
|
||||
```html
|
||||
<Link to="/movie/top100/5">电影</Link>
|
||||
|
||||
<Route path="/movie/:type/:id" component={Movie} exact/>
|
||||
```
|
||||
|
||||
|
||||
Moivie 组件的写法如下：
|
||||
|
||||
```java
|
||||
import React from "react";
|
||||
|
||||
export default class Movie extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
routeParams: props.match.params // 把路由中的参数保存到 state 中
|
||||
};
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log(this);
|
||||
// 如果想要从路由规则中，提取匹配到的参数，进行使用，可以使用 this.props.match.params.*** 来访问
|
||||
return (
|
||||
<div>
|
||||
{/* Movie --- {this.props.match.params.type} --- {this.props.match.params.id} */}
|
||||
Movie --- {this.state.routeParams.type} --- {this.state.routeParams.id}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
```
|
||||
|
||||
打印结果如下：
|
||||
|
||||
20190214_1030.png
|
||||
|
||||
|
||||
工程文件：
|
||||
|
||||
2019-02-14-ReactDemo.zip
|
||||
|
||||
@ -34,53 +34,14 @@
|
||||
|
||||
十二、编辑器相关。Sublime Text 是每个学前端的人都要用到的编辑器。另外，前端常见的IDE有两个：WebStorm 和 Visual Studio Code。WebStorm什么都好，可就是太卡顿；VS Code就相对轻量很多。个人总结一下：新手一般用 WebStorm，入门之后，用 VS Code 的人更多。
|
||||
|
||||
|
||||
## 推荐的学习视频
|
||||
|
||||
> 我看过的学习视频，多的数不清。传智播客、尚硅谷、慕课网、极客学院等等，这些只是冰山一角。下面推荐一些。
|
||||
|
||||
温馨提示：不一定是从头到尾看，可以选择性地看。另外，要倍速播放，我一般是用1.5倍的速度播放。
|
||||
|
||||
|
||||
### 传智播客
|
||||
|
||||
传智黑马2018 Web前端全套：
|
||||
|
||||
- 学习路线图：<http://bbs.itheima.com/thread-391250-1-1.html>
|
||||
|
||||
- 视频资源：<http://www.itcast.cn/news/20180209/11421176192.shtml>
|
||||
|
||||
- 官方视频库：<http://yun.itheima.com/course/c135.html>
|
||||
|
||||
PS：上面这三个链接，指向的的是同一个学习资源。
|
||||
|
||||
黑马的视频很新，可以找官方的QQ要配套的PPT和源码。
|
||||
|
||||
|
||||
|
||||
### 尚硅谷
|
||||
|
||||
尚硅谷 2018 Web前端全套：
|
||||
|
||||
- 视频资源：<https://www.52pojie.cn/thread-688171-1-1.html>
|
||||
|
||||
- 官方视频库：<http://www.gulixueyuan.com/course/explore/front>
|
||||
|
||||
PS：上面这两个链接，指向的的是同一个学习资源。
|
||||
|
||||
尚硅谷的视频里，讲JS语法和ES6的部分很不错。
|
||||
|
||||
|
||||
## 推荐的图文教程
|
||||
|
||||
看视频还是比较花时间的，你也可以看看图文教程。我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是：
|
||||
我在GitHub上有一个Web前端入门的学习教程，非常详细，地址是：
|
||||
|
||||
> <https://github.com/smyhvae/Web>
|
||||
|
||||
非常详细和贴心，你值得star。
|
||||
|
||||
|
||||
|
||||
## 推荐的技术博客
|
||||
|
||||
- [阮一峰](http://www.ruanyifeng.com/blog/)
|
||||
@ -91,10 +52,8 @@ PS：上面这两个链接，指向的的是同一个学习资源。
|
||||
|
||||
- 《[你不知道的JavaScript](https://book.douban.com/subject/26351021/)》
|
||||
|
||||
|
||||
上面这套书有上、中、下三本，你都可以读一读。如果时间不够，那就先读第一本。
|
||||
|
||||
|
||||
- 《[网络是怎样连接的](https://book.douban.com/subject/26941639/)》
|
||||
|
||||
程序员面试的时候，经常会被问的一个问题是：“在浏览器的地址栏输入url，按下回车后，发生了什么？”
|
||||
@ -103,15 +62,12 @@ PS：上面这两个链接，指向的的是同一个学习资源。
|
||||
|
||||
- <https://github.com/alex/what-happens-when>
|
||||
|
||||
|
||||
## 推荐的链接
|
||||
|
||||
待更新。
|
||||
|
||||
|
||||
PS：今天先写到这里。本文内容不定期更新。
|
||||
|
||||
|
||||
## 我的公众号
|
||||
|
||||
想学习<font color=#0000ff>**代码之外的技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
||||
|
||||
Loading…
Reference in New Issue
Block a user