React 路由—基本使用「建议收藏」

全栈程序员-用户IM • 2022年8月2日下午11:16 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元售后保障童叟无欺

一：安装

运行 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;