共计 3418 个字符，预计需要花费 9 分钟才能阅读完成。
应用 React 路由之前，咱们须要先装置 react-router-dom这个包。比方：
yarn add react-router-dom代码举例：
（1）index.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：
// 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:
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
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
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
import React from "react";
export default class About extends React.Component {constructor(props) {super(props);
this.state = {};}
render() {return <div>About 组件 </div>;}
}
匹配路由参数
含糊匹配与精准匹配
咱们在下面的代码中，进一步批改。假如 Movie 这个组件批改成这种路由匹配形式：
<Link to="/movie/top250"> 电影 </Link>
<Route path="/movie" component={Movie} />
下面这种匹配形式，也是能够胜利匹配到的。这是为啥呢？
这是因为：默认状况下，路由中的匹配规定，是 含糊匹配 的。如果 路由能够局部匹配胜利，就会展现这个路由对应的组件。
如果想让路由规定，进行 准确匹配，能够为 Route 增加 exact 属性。比方上面这种写法，因为是开启了精准匹配，所以是匹配不到的：（无奈匹配）
<Link to="/movie/top250/20"> 电影 </Link>
<Route path="/movie/" component={Movie} exact/>另外，如果要匹配参数，能够在匹配规定中，应用 : 修饰符，示意这个地位匹配到的是参数。举例如下：（匹配失常）
<Link to="/movie/top250/20"> 电影 </Link>
<Route path="/movie/:type/:id" component={Movie} exact/>获取路由参数
持续批改下面的代码。如果我想在 Movie 组件中显示路由中的参数，怎么做呢？
咱们能够通过 props.match.params获取路由中的参数。举例做法如下：
app.jsx 中的匹配规定如下：
<Link to="/movie/top100/5"> 电影 </Link>
<Route path="/movie/:type/:id" component={Movie} exact/>Moivie 组件的写法如下：
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>
);
}
}
正文完
