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

React 路由—基本使用「建议收藏」一:安装运行npmireact-router-dom安装react路由依赖项创建一个App.js根组件,并在根组件中,按需导入路由需要的三个组件HashRouter:表示路由的包裹

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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;

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/167846.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号