React 路由精讲(四)

一、前言        在上一篇博客中,只是在最后介绍了一下 react-router-dom 路由的 安装、BrowserRouter 和 HashRouter 的区别. 今天我们将共同学习 React 路由的剩余部分.        Follow me ~二、Route 配置路径1. Route 组件通过该组件来设置应用单个路由信息,
摘要由CSDN通过智能技术生成

一、前言

        在上一篇博客中,只是在最后介绍了一下 react-router-dom 路由的 安装、BrowserRouter 和 HashRouter 的区别. 今天我们将共同学习 React 路由的剩余部分.

        Follow me ~

二、Route 配置路径

1. Route 组件

通过该组件来设置应用单个路由信息,Route 组件所在的区域就是就是当 URL 与当前 Route 设置的 path 属性匹配的时候,后面 component 将要显示的区域

        昨天我们配置了 BrowserRouter 和 HashRouter 组件,从简单方面来说就是 url 路径上带不带 “#” 号的意思. 然后就要开始配置 路由跳转的路径地址了,请看下面代码 :

import React from "react"
import {
   Route} from "react-router-dom";
import IndexPage from './view/index';
import AboutPage from './view/about';
import AboutMorePage from './view/aboutMore';

function App() {
   
  return (
    <div>
      <Route path="/" component={
   IndexPage}/>
      <Route path="/about" component={
   AboutPage}/>
      <Route path="/about/more" component={
   AboutMorePage}/>
    </div>
  );
}

export default App;

React 的配置路由跳转就是这么简单,可以分为:

  1. 在上面引入 Route 和 组件地址
  2. 上面使用的是 函数式组件,你也可以使用类组件,在 return 里面 使用 Route 单标签,里面写入匹配的路径 和 组件地址

        我们来看效果图,这样一个 React 路由就配置好了
在这里插入图片描述

2. exact

        相信你在浏览器中变更 路径之后,只要是路径中包含有配置的路径时,组件内容都会被显示出来
在这里插入图片描述
        为了解决这个弊端,我们可以使用 exact

exact 属性表示路由使用 精确匹配模式,非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头的路由
path中 匹配url的方式不是相等,而是 以指定的的 url 开头
为了解决这个问题, 你可以在配置路径时,在里面 加上一个单词 exact

        代码案例 :

function App() {
   
  return (
    <div>
      <Route path="/" exact component={
   IndexPage}/>
      <Route path="/about" exact component={
   AboutPage}/>
      <Route path="/about/more" exact component={
   AboutMorePage}/>
    </div>
  );
}

        浏览器效果 :
在这里插入图片描述

三、Link 组件

Link 组件用来处理 a 链接 类似的功能(它会在页面中生成一个 a 标签),但设置这里需要注意的,react-router-dom 拦截了实际 a 标签的默认动作,然后根据所有使用的路由模式(Hash 或者 HTML5)来进行处理,改变了 URL,但不会发生请求,同时根据 Route 中的设置把对应的组件显示在指定的位置

to 属性

to 属性类似 a 标签中的 href

        代码实例 :

创建一个自定义组件

import React from "react"
import {
   Link} from "react-router-dom"

export default function Nav(){
   
    return (
        <nav>
            <Link to="/">首页</Link>
            <span></span>

            <Link to="/about">关于我们</Link>
            <span></span>

            <Link to="/about/more">详情</Link>
            <span></span>
        </nav>
    )
}

app.js :

function App() {
   
  return (
    <div>
      <Nav/>

      <Route path="/" exact component={
   IndexPage}/>
      <Route path="/about" exact component={
   AboutPage}/>
      <Route path="/about/more" exact component={
   AboutMorePage}/>

    </div>
  );
}

在这里插入图片描述
        link 组件 和 path 属性的区别?

link 组件 只改变 url
path 属性 匹配 url

四、Route 属性

1. render

通过 render 属性来指定渲染函数,render 属性值是一个函数,当路由匹配的时候指定该函数进行渲染
它最终的效果也会向上面那样

        代码实例 :

<Route path="/" exact render={
   ()=>{
   
        return <IndexPage/>
      }}/>

2. props

如果 Route 使用的是 component 来指定组件,那么不能使用 props

        代码实例 :

父组件 :

// 引入 useState
import React,{
   useState} from "react"

function App() {
   
  let [user,setUser] = useState("router吧") 
  return (
    <div>
      <Nav/>

      <Route path="/" exact render={
   ()=>
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值