React - Router的基本使用介绍

这篇具有很好参考价值的文章主要介绍了React - Router的基本使用介绍。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Router的基本使用介绍

认识React-Router

目前前端流行的三大框架, 都有自己的路由实现:

Angular的ngRouter

React的ReactRouter

Vue的vue-router

React Router在最近两年版本更新的较快,并且在最新的React Router6.x版本中发生了较大的变化

目前React Router6.x已经非常稳定,我们可以放心的使用;

说明一下, Router4.x和Router5.x的区别是不大的, 而Router6.x就有些区别, 所以Router系列的文章主要针对Router6.x进行讲解, 当有与4或5版本不同的地方时会单独强调

安装React Router:

安装时,我们选择安装react-router-dom, npm install react-router-dom;

因为react-router会包含一些react-native的内容,web开发并不需要;


Router的组件API

react-router最主要的API是给我们提供的一些组件:

BrowserRouter或HashRouter

Router中包含了对路径改变的监听,并且会将相应的路径传递给子组件;

BrowserRouter使用history模式;

import React from "react"
import ReactDOM from "react-dom/client"
import { BrowserRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <BrowserRouter>
    <App/>
  </BrowserRouter>
)

HashRouter使用hash模式

import React from "react"
import ReactDOM from "react-dom/client"
import { HashRouter } from "react-router-dom"
import App from "./App"

const root = ReactDOM.createRoot(document.querySelector("#root"))

root.render(
  <HashRouter>
    <App/>
  </HashRouter>
)

Router的映射配置

Routes:包裹所有的Route,在其中匹配一个路由

Router6.x使用的是Routes组件

Router5.x使用的是Switch组件

Route:Route用于路径的匹配;

Router6.x不允许Router组件单独存在

path属性: 用于设置匹配到的路径;

element属性: 设置匹配到路径后,渲染的组件;

  • Router5.x使用的是component属性

exact: 精准匹配,只有精准匹配到完全一致的路径,才会渲染对应的组件;

  • Router6.x不再支持该属性
<div className='app'>
  <div className='header'>header</div>
  
  <div className='counter'>
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/profile' element={<Profile/>}/>
    </Routes>
  </div>
  
  <div className='footer'>footer</div>
</div>

Router配置和跳转

Link组件:

通常路径的跳转是使用Link组件,这个组件最终会被渲染成a元素;

NavLink是在Link基础之上增加了一些样式属性(后续会讲解);

to属性: Link中最重要的属性,用于设置跳转到的路径

例如实现上面代码, 我们在header中实现点击按钮切换页面的效果

<div className='app'>
  <div className='header'>
    <Link to="/">首页</Link>
    <Link to="/about">关于</Link>
    <Link to="/profile">我的</Link>
  </div>

  <div className='counter'>
    <Routes>
      <Route path='/' element={<Home/>}/>
      <Route path='/about' element={<About/>}/>
      <Route path='/profile' element={<Profile/>}/>
    </Routes>
  </div>

  <div className='footer'>footer</div>
</div>

NavLink组件

需求:路径选中时,对应的a元素的文字变为红色

这个时候,我们要使用NavLink组件来替代Link组件, NavLink组件选中时, 有添加一个类(这个组件了解即可, 不如自己控制更方便):

事实上在默认匹配成功时,NavLink就会动态的添加上一个class: active , 选中的时候就会添加;

所以我们也可以直接编写样式

当然,如果你担心这个class在其他地方被使用了,出现样式的层叠,也可以自定义class和动态添加样式

style属性: 传入一个函数,函数的参数接收一个对象,该对象包含isActive属性

<NavLink to="/" style={({ isActive }) => ({color: isActive ? "red" : ""})}>首页</NavLink>
<NavLink to="/about" style={({ isActive }) => ({color: isActive ? "red" : ""})}>关于</NavLink>
<NavLink to="/profile" style={({ isActive }) => ({color: isActive ? "red" : ""})}>我的</NavLink>

className:传入一个函数,函数的参数接受一个对象,该对象包含isActive属性

<NavLink to="/" className={({ isActive }) => isActive ? "my-class" : ""}>首页</NavLink>
<NavLink to="/about" className={({ isActive }) => isActive ? "my-class" : ""}>关于</NavLink>
<NavLink to="/profile" className={({ isActive }) => isActive ? "my-class" : ""}>我的</NavLink>

Navigate组件使用

Navigate用于路由的重定向,当这个组件出现时,就会执行跳转到对应的to路径中:

我们这里使用这个的一个案例:

用户跳转到Profile界面;

但是在Profile界面有一个isLogin用于记录用户是否登录:

  • true: 表示已登录, 跳转到首页;
  • false: 表示未登录, 显式登录按钮;
export class Profile extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      isLogin: false
    }
  }

  login() {
    this.setState({
      isLogin: true
    }) 
  }

  render() {
    const { isLogin } = this.state
    console.log(isLogin)

    return (
      <div>
        <h2>Profile</h2>
        {/* 为true时重定向到首页 */}
        {isLogin ? <Navigate to="/home" /> : <button onClick={() => this.login()}>登录</button>}
      </div>
    )
  }
}

我们也可以在匹配到 “/” 的时候,直接跳转到 “/home” 页面

<Routes>
  {/* 当默认路径 / 时, 重定向到home页面 */}
  <Route path='/' element={<Navigate to="/home"/>}></Route>
  <Route path='/home' element={<Home/>}/>
  <Route path='/about' element={<About/>}/>
  <Route path='/profile' element={<Profile/>}/>
</Routes>

Not Found页面配置

如果用户随意输入一个地址,该地址无法匹配,那么在路由匹配的位置将什么内容都不显示。

很多时候,我们希望在这种情况下,让用户看到一个Not Found的页面

这个过程非常简单:

开发一个Not Found页面;

配置对应的Route,并且设置path为*即可;文章来源地址https://www.toymoban.com/news/detail-405291.html

<Routes>
  {/* 当默认路径 / 时, 重定向到home页面 */}
  <Route path='/' element={<Navigate to="/home"/>}></Route>
  <Route path='/home' element={<Home/>}/>
  <Route path='/about' element={<About/>}/>
  <Route path='/profile' element={<Profile/>}/>
  {/* 当上面路径都没有匹配到时, 显式Notfound组件 */}
  <Route path='*' element={<Notfound/>}/>
</Routes>

到了这里,关于React - Router的基本使用介绍的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • React Router的使用

    React Router 是 React 项目的路由库,使用很方便,也是 React 前端项目的主要功能库之一。这里的路由指的是客户端的路由,在客户端路由时,浏览器是不会发送页面请求的,只会发送数据请求。 安装依赖 主要组件 首先创建一个 Router,这里创建的是 BrowserRouter,还有其他类型的

    2024年04月27日
    浏览(33)
  • React中使用react-router-cache-route缓存页面状态

    在开发中,从A页面跳转到other页面,再返回A页面时react-router会直接刷新页面,导致A页面中已加载的海量数据状态丢失,需要重新加载,用户体验不佳,所以必须将海量数据状态进行缓存。 (在小编的实际场景中,A页面是一堆模型业务数据标注点,由于模型永远不会更改,但

    2023年04月13日
    浏览(44)
  • react的redux和router的使用案例讲解

    react的redux和router的使用案例讲解 安装依赖: 首先,你需要安装一些必要的依赖项。使用以下命令安装Redux、React Redux和React Router: 配置Redux Store: 创建一个Redux store来管理应用程序的状态。在这个案例中,我们将存储待办事项列表和当前选定的待办事项。 使用Redux: 在Reac

    2024年01月22日
    浏览(59)
  • 【退役之重学前端】使用vite+vue3+vue-router,重构react+react-router前后端分离的商城后台管理系统

    前言: 对前端各个技术板块,HTML、CSS、JavaScript、ES6、vue家族,整体上能“摸其大概”。笔者计划重构一个基于react的商城后台管理系统。 —— 2024年2月16日 vue3 sass bootstrap ES7 前后端分离 分层架构 模块化开发 npm vite git

    2024年02月20日
    浏览(56)
  • React 基本介绍

    目录 1、React是什么 2、React 三大颠覆性的特点 2.1 组件 2.2 JSX 2.3 Virtual DOM 3、Flux 架构(redux) 3.1 Flux 3.2 redux 4、打包工具(webpack) 4.1 webpack与RequireJS、browserify 4.2 模块规范 4.3 非 JavaScript 模块支持 4.4 webpack 的特点与优势 React 是 Facebook 推出的一个 JavaScript 库,它的口号就是

    2024年02月08日
    浏览(44)
  • Vue-Router基本使用

    1 安装: vue2项目要安装vue-router@3版本 npm i vue-router@3 2 src下创建router目录,router文件夹下创建index.js 在vue.config.js中 配置src路径别名  3 在main.js中引入 4 在app.vue中配置  5 即可看到内容    

    2024年02月15日
    浏览(35)
  • 【React Router】React Router学习笔记

    React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。 React Router 知道如何为我们搭建嵌套的 UI,因此我们不用手动找出需要渲染哪些 Child 组件。 获取URL参数。当渲染组件时,React Router 会自动向 Route 组件

    2024年02月08日
    浏览(35)
  • 使用 create-react-app 搭建项目ts+less+antd+redux+router+eslint+prettier+axios

    当前市面上有很多前端框架或者模板、如:umi、dva、antd-design-pro、create-react-app 等一些框架或者模板。 create-react-app 是 react 官方提供的,相对来说比较干净一些。 此项目是在 create-react-app 的基础上进行搭架、项目采用 ts 语法 项目整体上会添加上以下功能: 完整项目代码 传

    2024年02月03日
    浏览(44)
  • 【React】React-router路由

    路由是根据不同的url地址展示不同的内容或页面 注: 一个针对react设计的路由解决方案,可以友好的帮助解决React components到URL之间的同步映射关系 导入路由 注:路由模式有 HashRouter 和 BrowserRouter 两种模式,其中BrowserRouter的路径没有#,样式好看,真正朝后端发请求,后端若

    2023年04月17日
    浏览(69)
  • 【React】react-router 路由详解

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做,根据不同的url地

    2024年02月01日
    浏览(40)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包