路由的基本使用

悠悠 2022-08-28 14:49 224阅读 0赞

## react路由的基本使用 ##

#### 1.1安装 ####

> $npm i react-router-dom -S 或者 yarn add react-router-dom

#### 1.2导入 ####

> 使用找到app.js文件

import { BrowserRouter as Router,Route,Link} from 'react-router-dom'

因为这里我将`BrowserRouter`组件取了个别名`Router`,使用router包裹整个应用

export default class App extends Component { 
      render() { 
        return (
          <Router>
            <div className="App">
              <header className="App-header">
                <Asign>啊</Asign>
              </header>
            </div >
       	  </Router>
        );
      }
    }

#### 1.3Link作为导航菜单使用（路由入口） ####

<Link to="/first">第一个页面</Link>

#### 1.4Route（路由出口） ####

> path 属性：路由规则  
> component：展示的组件  
> Route:写在哪组件就展示在哪

<Route path='/first' component={ First}></Route>

以上使用的是BrowserRouter 还有一种是 HashRouter 使用的URL的哈希值实现（127.0.0.1:3000/\#/first）

#### 1.4.1 父子路由嵌套 ####

父路由

<Route path='/first' component={ First}></Route>

子路由

> 注意子路由必须以父路由的前缀为名

<Route path='/first/son' component={ First}></Route>

## 2.1编程式导航路由 ##

> history是React路由提供的，用于获取浏览器历史记录的相关信息  
> push（path）：跳转到某个页面，参数path表示要跳转的路径  
> go（n）:返回到某个页面n代表跳跃的路由，用于跳转已经浏览的记录

handleLogin=()=>{ 
    	this.props.history.push('./login')
    }

#### 3.1精确匹配与模糊匹配 ####

精确匹配在Route中加个exact

<Route exact path='/first' component={ First}></Route>

默认是模糊匹配

> 只要是以`/first`开头的路由都会被匹配上 例如`/first/a/b`都会被匹配上

<Route path='/first' component={ First}></Route>

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关前端路由vue-router的基本使用

文章目录一.前端路由的概念与原理 1. 什么是路由 2.前端路由的工作方式二.vue-router 的基本用法 1.

桃扇骨/ 2024年04月08日 08:25/ 0 赞/ 108 阅读

相关 React路由BrowserRouter的基本使用完整代码

-------------------- title: React教程 date: 2023-04-06 20:51:55 tags: \[react\] cat

缺乏、安全感/ 2023年09月25日 22:13/ 0 赞/ 52 阅读

相关 16Flutter中的路由基本路由基本路由跳转传值(上)

/\ Flutter中的普通路由、普通路由传值、命名路由、命名路由传值 Flutter中的路由通俗的讲就是页面跳转。在Flutter中通过Navigator组件管理路由导航

た入场券/ 2023年08月17日 15:58/ 0 赞/ 196 阅读

相关 HCNP路由交换学习指南--- 路由的基本概念

文章目录 HCNP路由交换学习指南--- 路由的基本概念交换机路由表学习路由信息来源路由的优先级路由的

雨点打透心脏的1/2处/ 2022年11月14日 10:29/ 0 赞/ 614 阅读

相关路由的基本使用

react路由的基本使用 1.1安装 > $npm i react-router-dom -S 或者 yarn add react-router-dom 1.2

悠悠/ 2022年08月28日 14:49/ 0 赞/ 225 阅读

相关路由子系统——基本概念与高级路由

本文讨论IPv4的路由子系统。（IPv6对路由的处理不同）。基本概念关于路由子系统路由子系统工作在三层，用来转发入口流量。路由子系统主要涉及路由器、

矫情吗；*/ 2022年08月05日 07:37/ 0 赞/ 310 阅读

相关 Vue.js 路由的基本使用

文章目录什么是路由在 vue 中使用 vue-router 使用tag属性指定router-link渲染的标签类型

「爱情、让人受尽委屈。」/ 2022年03月17日 14:20/ 0 赞/ 219 阅读

相关基本路由和静态路由配置

R1(config)\ erase startup-config .在特权模式下使用 erase startup-config命令清除配置 R1(con

怼烎@/ 2022年02月20日 02:47/ 0 赞/ 559 阅读

相关 Vue教程(路由router-基本使用)

本文开始我们来给大家介绍在Vue中非常重要的一个内容，就是路由Router 什么是路由 1. 后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地

深碍√TFBOYSˉ_/ 2021年11月10日 19:04/ 0 赞/ 315 阅读

相关 Vue路由（嵌套路由）的使用

1、vue-router介绍 vue-router是Vue.js的路由插件。适合用于构建单页面应用，基于路由和组件；路由用于设定访问路径，将路径和组件映射起来。路径

￡神魔★判官ぃ/ 2021年09月20日 09:08/ 0 赞/ 660 阅读