react路由

最新推荐文章于 2024-03-11 23:45:39 发布
最新推荐文章于 2024-03-11 23:45:39 发布
阅读量1k 收藏
点赞数
文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44769099/article/details/124073522
版权

目录

安装

导入

普通路由

路由传参

 子路由

404页面

路由守卫

完整代码 

安装

本次使用的是5.0版本

npm i react-router-dom@5.0 -S

导入

import {
  HashRouter as Router,    //HashRouter哈希路由 as起别名 router路由
  Route,                   //Route 存放路由的容器
  NavLink,                 //navlink 导航链接
  Redirect,                // Redirect 重定向
  Switch,                  // Switch一次匹配一个页面
} from "react-router-dom";

普通路由

import {
  HashRouter as Router,
  Route,
  NavLink
} from "react-router-dom";
function App() {
  return (
    <Router>
      <div className="nav">
        <NavLink to="/" exact>首页</NavLink>|
        <NavLink to="/about">关于</NavLink>
      </div>
      <div className="views">
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
      </div>
    </Router>
  );
}
 
export default App;
 
function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  );
}
 
function About() {
  return (
    <div>
      <h1>关于页面</h1>
    </div>
  );
}

路由传参

<NavLink to="/details/abc">详情abc</NavLink>|
<Route path="/details/:id" component={Details}></Route>
function Details({match,location}){
  return (<div>
      <h1>详情内容</h1>
      <p>参数：{match.params.id}</p>
      <p>match:{JSON.stringify(match)}</p>
      <p>location:{JSON.stringify(location)}</p>
  </div>);

 

 子路由

父路由是普通路由，在父组件中配置子路由

在子路由中配置重定向Redirect，可控制子路由默认显示页面

function Admin() {
  return (
    <div>
      <h1>Admin页面</h1>
      <p>
        <NavLink to="/admin/dash">概述</NavLink>
        <NavLink to="/admin/orderlist">订单列表</NavLink>
      </p>
      <Route path="/admin/dash" component={Dash}></Route>
      <Route path="/admin/orderlist" component={OrderList}></Route>
      <Redirect from="/admin" to="/admin/dash"></Redirect>
    </div>
  );
}

  

404页面

* 匹配任意地址，将404页面放在最后，并在外层加上<Switch>组件控制只匹配一个页面。当无其他匹配页面时就显示404页面 

      <div className="views">
        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/details/:id" component={Details}></Route>
          <Route path="/admin" component={Admin}></Route>
          <Route path="*" component={NoMatch}></Route>
        </Switch>
      </div>

路由守卫

添加登录页面，设置路由守卫

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//navlink 导航链接
// Redirect 重定向
// Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
          <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
            {/* * 匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>

         </Switch>
        </div>
    </Router>);
}
export default App;
// 把props.chilren 解构诶children ...rest 剩余的其他参数
function Private({children,...rest}){
  // 把Private组件的参数除了children全部转移到Route组件
  // Route不直接指定component通过render渲染出来
   return <Route {...rest} render={
     ({location})=>{
      // 如果获取本地存储的isLog得到了（登陆了），返回children 子节点Admin 否则 返回一个Redirect组件
      // Redirect 默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)
       return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
     }
   }></Route>
}

function Login({location,history}){
  function logIt(){
      // 存储到本地
      localStorage.setItem("isLog",true);
      // 获取redirect信息
      var redirect = location.state.redirect||"/";
      // 如果没有拿到就跳转到首页
      history.push(redirect);
  }
  return<div>
    <h1>登录</h1>
    <button onClick={logIt}>登录</button>
  </div>
}

// 404 页面
function NoMatch({location}){
  return (<div>
    <h3>404</h3>
    <p>当前地址找不到: {location.pathname}</p>
    <NavLink to="/">首页</NavLink>
  </div>)
}

function Admin(){
  return <div>
    <h1>Admin页面</h1>
    <p><NavLink to="/admin/dash">概览</NavLink> |<NavLink to="/admin/orderlist">订单列表</NavLink> </p>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    <Redirect from='/admin' to="/admin/dash"></Redirect>
  </div>
}
function Dash(){
  return <div>
    <h2>概览页面</h2>
  </div>
}
function OrderList(){
  return <div>
    <h2>订单列表页面</h2>
  </div>
}

function Details({match,location}){
    return (<div>
        <h1>详情内容</h1>
        <p>参数：{match.params.id}</p>
        <p>match:{JSON.stringify(match)}</p>
        <p>location:{JSON.stringify(location)}</p>
    </div>);
}
// match 是匹配的路由参数
// path 路径
// url  地址
// isExact是否精确匹配
// params 路由的参数
function Home({history}){
  
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
// 不同NavLink跳转到首页
function About({match,history,location}){
    
    return (<div>
        <h1>关于内容</h1>
 
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>输出历史记录</button>
        <NavLink to={{
          pathname:"/details/abc",
          search:"name=mumu&age=18",
          hash:"good",
          state:{reidrect:"/about"}
        }}>详情abc</NavLink>

    </div>);
}

点击登录添加 isLog ，值为true，此时进入管理页面会正常进去，若没有isLog，则点击管理页面会跳转到登录页面 

 

完整代码 

//导入路由相关的组件
//HashRouter哈希路由 as起别名 router路由
//router 存放路由的容器
//navlink 导航链接
// Redirect 重定向
// Switch一次匹配一个页面
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
function App(){
    return (<Router>
        <div className='nav'>
            <NavLink to="/" exact>首页</NavLink> |
            <NavLink to="/about">关于页面</NavLink> |
            <NavLink to="/details/abc">abc详情</NavLink> |
            <NavLink to="/details/123">123详情</NavLink> |
            <NavLink to="/admin">管理页面</NavLink> |
            <NavLink to="/login">登录</NavLink> |
        </div>
        <div className='views'>
          <Switch>
            <Route path="/" component={Home} exact></Route>
            <Route path="/about" component={About}></Route>
            <Route path="/details/:id" component={Details}></Route>
            <Private path="/admin">
                <Admin></Admin>
            </Private>
            <Route path="/admin" component={Admin}></Route>
            <Route path="/login" component={Login}></Route>
            {/* * 匹配任意路径 */}
            <Route path="*" component={NoMatch}></Route>

         </Switch>
        </div>
    </Router>);
}
export default App;
// 把props.chilren 解构诶children ...rest 剩余的其他参数
function Private({children,...rest}){
  // 把Private组件的参数除了children全部转移到Route组件
  // Route不直接指定component通过render渲染出来
   return <Route {...rest} render={
     ({location})=>{
      // 如果获取本地存储的isLog得到了（登陆了），返回children 子节点Admin 否则 返回一个Redirect组件
      // Redirect 默认跳转到 /login登录页面 传入一个state数据 redirect自定义值 location.pathname(本来要跳转的地址)
       return localStorage.getItem("isLog")?(children):<Redirect to={{pathname:"/login",state:{redirect:location.pathname}}}></Redirect>
     }
   }></Route>
}

function Login({location,history}){
  function logIt(){
      // 存储到本地
      localStorage.setItem("isLog",true);
      // 获取redirect信息
      var redirect = location.state.redirect||"/";
      // 如果没有拿到就跳转到首页
      history.push(redirect);
  }
  return<div>
    <h1>登录</h1>
    <button onClick={logIt}>登录</button>
  </div>
}

// 404 页面
function NoMatch({location}){
  return (<div>
    <h3>404</h3>
    <p>当前地址找不到: {location.pathname}</p>
    <NavLink to="/">首页</NavLink>
  </div>)
}

function Admin(){
  return <div>
    <h1>Admin页面</h1>
    <p><NavLink to="/admin/dash">概览</NavLink> |<NavLink to="/admin/orderlist">订单列表</NavLink> </p>
    <Route path="/admin/dash" component={Dash}></Route>
    <Route path="/admin/orderlist" component={OrderList}></Route>
    <Redirect from='/admin' to="/admin/dash"></Redirect>
  </div>
}
function Dash(){
  return <div>
    <h2>概览页面</h2>
  </div>
}
function OrderList(){
  return <div>
    <h2>订单列表页面</h2>
  </div>
}

function Details({match,location}){
    return (<div>
        <h1>详情内容</h1>
        <p>参数：{match.params.id}</p>
        <p>match:{JSON.stringify(match)}</p>
        <p>location:{JSON.stringify(location)}</p>
    </div>);
}
// match 是匹配的路由参数
// path 路径
// url  地址
// isExact是否精确匹配
// params 路由的参数
function Home({history}){
  
    return (<div>
        <h1>首页内容</h1>
        <button onClick={history.goBack}>返回</button>
    </div>);
}
// 不同NavLink跳转到首页
function About({match,history,location}){
    
    return (<div>
        <h1>关于内容</h1>
 
        <button onClick={()=>history.push('/')}>首页</button>
        <button onClick={()=>history.replace('/')}>首页-replace</button>
        <button onClick={()=>console.log(history)}>输出历史记录</button>
        <NavLink to={{
          pathname:"/details/abc",
          search:"name=mumu&age=18",
          hash:"good",
          state:{reidrect:"/about"}
        }}>详情abc</NavLink>

    </div>);
}

 

月凉笙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react路由配置方式详解
12-09
本文介绍了react路由配置，最近刚开始学，分享给大家，顺便给自己留个笔记。 包含了LInk跳转以及js触发跳转并传参。 这是项目的目录结构，主要的代码都在src目录下，src下面新建一个containers文件夹放我们的一些...
React路由
w19981225的博客
10-14 114
React路由 安装 如果想要使用react路由，则需要安装react-router-dom 在该模块中，我们会经常使用BrowserRouter，HashRouter，Route，Switch，Redirect，Link，NavLink 使用 import React, { Component } from 'react' import { HashRoter as Router, Route } from 'react-router-dom' class Router extends Componen
react 路由
qq_42975676的博客
05-15 96
react router中一切皆组价，路由器router，链接link，路由route，独占switch，重定向redirect都以组件形式存在 渲染优先级 children>component>render
如何根据命令创建React项目，如何在React项目中使用Router路由
最新发布
Reggie97的博客
03-11 409
本文主要介绍了如何初次创建一个React项目，如何在创建好的项目中使用Router路由功能这两部分内容
React 路由
qq_45715615的博客
02-27 246
前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面）。 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系。 使用React路由简单来说，就是配置 路径和组件（配对）。 1 使用步骤 1. 安装：yarn add react-router-dom 2. 导入路由的三个核心组件：Router / Route / Link 3. 使用 Router 组件包裹整个应用（重要） 4. 使用 Link 组件作为导航菜单（路由入口）（a标签） <Link to="/fi
React路由鉴权的实现方法
10-16
主要介绍了React路由鉴权的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
React 路由懒加载的几种实现方案
10-17
主要介绍了React 路由懒加载的几种实现方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
react的单页面应用SPA及路由组件
weixin_46051988的博客
05-10 691
SPA的理解 单页Web应用(sigle page web application,SPA)。 整个用用只有一个完整的页面. 点击页面中的链接不会刷新,只会做页面的局部刷新。 数据都需要通过ajax请求获取,并在前端异步展现。 路由的理解 1. 什么是路由？ 一个路由就是一个映射关系（key:value） key为路径，value可能就是function或者component 2. 路由分类 . 后端路由： 理解：value 是function，用来处理客户端提交的请求。 注册路由：router
react路由哈希路由
03-31
React路由有两种主要的路由方式：哈希路由和浏览器路由。 哈希路由是指在URL中使用#符号，例如：`http://example.com/#/home`。这种方式的好处是可以避免页面刷新，因为每次URL的改变只会触发hashchange事件，而...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值