【掰开揉碎】React Router——React应用导航(二)

简介: 【掰开揉碎】React Router——React应用导航(二)

第七步:Redirect

有时候我们需要在用户访问旧路径时自动重定向到新路径,这时候就用到 Redirect 组件了。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';
 
function App() {
  return (
    <Router>
      <Route path="/" exact component={Home} />
      <Route path="/user/:username" component={UserProfile} />
      <Redirect from="/old-path" to="/new-path" />
    </Router>
  );
}
 
export default App;

第八步:Switch

Switch 组件用于只匹配第一个符合条件的路由,防止多个路由同时匹配。

// App.js
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import UserProfile from './UserProfile';
 
function App
相关文章
|
11月前
|
前端开发 开发者
Umi 4 特性 02:React Router 6 和新路由
Umi 4 特性 02:React Router 6 和新路由
787 0
|
2月前
|
前端开发 JavaScript API
介绍一下React Router的工作原理。
介绍一下React Router的工作原理。
33 5
|
3月前
|
前端开发 JavaScript API
React Router v6 完全指南(下)
React Router v6 完全指南(下)
|
3月前
|
存储 资源调度 前端开发
React Router v6 完全指南(上)
React Router v6 完全指南(上)
154 0
|
5月前
|
前端开发 JavaScript 数据安全/隐私保护
React路由与导航
前言: React是一个流行的JavaScript库,用于构建用户界面。在使用React开发Web应用程序时,路由和导航是必不可少的功能之一。它们允许我们在不刷新页面的情况下在不同的视图之间进行切换,提供了更加流畅和交互式的用户体验。
52 0
|
5月前
|
存储 前端开发 JavaScript
React Router,常用API有哪些?
React Router,常用API有哪些?
44 0
|
8月前
|
前端开发
【react 中router v6 与 v5 区别】
【react 中router v6 与 v5 区别】
|
8月前
|
前端开发 JavaScript API
React/Vue 实现路由鉴权、导航守卫和路由拦截的优化建议
本文介绍了在 React 和 Vue 中如何实现路由鉴权、导航守卫和路由拦截的方法。路由鉴权是指根据用户权限验证用户是否有权限访问特定的路由页面。导航守卫是在路由切换之前执行的钩子函数,用于控制路由的跳转。路由拦截是在路由处理过程中拦截某些特定路由的行为。本文将介绍 React 和 Vue 中的相关概念和实现方式,并通过示例代码展示如何应用这些概念来实现路由鉴权、导航守卫和路由拦截。
328 2
|
10月前
|
前端开发
React全家桶建站教程-Router #6
React全家桶建站教程-Router #6
52 0
|
10月前
|
存储 前端开发 安全
在 React Router 中使用 JWT
本篇文章将探讨 JWT 身份校验与 React 和 React-router 的无缝集成。 我们还将学习如何处理公共路由、受校验保护路由,以及如何利用 axios 库通过身份验证令牌发出 API 请求
139 0
在 React Router 中使用 JWT