大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>
<Link to="/movie">电影</Link>
<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> <Link to="/movie">电影</Link> <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.net/167846.html原文链接：https://javaforall.net
