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

全栈程序员站长

发布于 2022-09-20 10:20:48

4160

发布于 2022-09-20 10:20:48

文章被收录于专栏：全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

一：安装

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

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/167846.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

java