React 路由---基本使用

一：安装

运行 npm i react-router-dom 安装react路由依赖项

创建一个 App.js 根组件，并在根组件中，按需导入路由需要的三个组件

 

HashRouter: 表示路由的包裹容器，这个组件，在项目中，只使用唯一的一次！

就在 App 根组件中，作为最外层的容器，报包裹住整个App中的UI结构

import React from "react";
 // 引入路由 
import { HashRouter, Route, Link } from "react-router-dom"; 
class App extends React.Component { 
render() {
 return ( 
　　// 全局应用组件路由 
　　// 此后所有内容 都在 HashRouter 
　　<HashRouter> 
　　{/* HashRouter 里面只能有一个根标签 */}
 　　<div>123</div>
　　 </HashRouter> ); 
　　} 
}

export default App;

二，路由跳转链接

Link: 表示路由的链接；就相当于 Vue 中的 <router-link></router-link>

Link 组件的属性节点上，有 to 属性，表示点击这个链接之后，会跳转到哪个路由地址

render() {
 return ( 
// 全局应用组件路由
 // 此后所有内容 都在 HashRouter 
<HashRouter>
    {/* HashRouter 里面只能有一个根标签 */}
    <div><h1>组件路由</h1> 
　　{/* 添加路由跳转链接 */} 
　　　　<Link to="/home">首页</Link>&nbsp;&nbsp; 
　　　　<Link to="/movie">电影</Link>&nbsp;&nbsp; 
　　　　<Link to="/about">关于</Link> 
　　</div> 
</HashRouter> ); 
}

三：路由规则匹配

Route: 表示路由的匹配关系，可以把 每个 Route，都看成是每一个路由规则；

Route 的属性节点中，包含 path 属性和 component 属性；

其中，path 表示当前路由规则，要匹配的 hash 地址； component 表示当前路由规则对应要显示的组件

注意： Route 有两层身份： 1. 路由规则 2. 占位符

import React from "react"; 
// 引入路由
import { HashRouter, Route, Link } from "react-router-dom";
// 引入组件
import Home from './components/Home' 
import Movie from './components/Movie' 
import About from './components/About' 

class App extends React.Component {
render() { 
　　return (
  <HashRouter> 
　　<div> <h1>组件路由</h1> 
　　　{/* 路由链接组件 */} 
　　　<Link to="/home">首页</Link>&nbsp;&nbsp; 
　　　<Link to="/movie">电影</Link>&nbsp;&nbsp;
 　　 <Link to="/about">关于</Link>
 　　 <hr></hr>
 　　　　{/* 新增一个重定向的路由规则 */} 
　　　<Route path="/home" component={Home} ></Route>
 　　 <Route path="/movie" component={Movie} ></Route> 
　　　<Route path="/about" component={About} ></Route>
 　　</div> 
  </HashRouter> ); 
 } 
}
export default App;