一起来看React(路由跳转）

我们在观看网页时，点击一个图片或文字进行跳转是比较常见的，我们可以通过当前页面刷新/路由跳转

其中路由跳转就是最常见的类型

为了便利大家的观看我把文件夹尽可能简化了.如图-->

其中PrivateRoute是用于路由守卫的我们后面会进行介绍 现在就不进行详解了

我们主要在router/index.js中

import React from "react"
import {HashRouter,Route,Switch} from "react-router-dom"
//引用我们的react-router...
import {PrivateRoute} from "./PrivateRoute"
//这是路由守卫
import App from "../App.js"
//这是我定义的主页面
//下面的为我们要跳转的页面的链接
import One from "../page/one.js"
import Two from "../page/two.js"
import Three from "../page/three.js"
import Four from "../page/four.js"
复制代码

在App.js中我们所需要的就是很简单的点击跳转

<ul>
    <li onClick={this.goto.bind(this,'/one')}>第一个</li>
    <li onClick={this.goto.bind(this,'/two')}>第二个</li>
    <li onClick={this.goto.bind(this,'/three')}>第三个</li>
    <li onClick={this.goto.bind(this,'/four')}>第四个</li>
</ul>
复制代码

之后我们只需要在Router外写这个goto事件

goto(i){
  //这个sessionStorage主要是用于解决路由守卫的问题,现在没有用
  sessionStorage.setItem("isLogin",true)
  //用于实现路由跳转
  this.props.history.push(i)
  }
复制代码

我还是回答一下“小伙伴”的问题吧，为什么感觉我的解释啊或者介绍啊这么简短

不是我不想介绍,或者懒(确实懒)但我个人比较喜欢简介且大方的代码格式包括命名

代码并不麻烦,繁琐的是思路==>>我只是介绍大致上的方向--想要深入的可以去看手册或者自己多方尝试.

我做“代码小子”这么久了,见过思路清晰代码简介的人。内种人的思路都是自己想的,他们只需要了解<游戏规则>

反正总而言之,言而总之:重点就是我只介绍方向和简单思路 细节轻自行选择(因为全按照别人思路走容易陷入死区)