首页 > 其他分享 >react js 路由 Router

react js 路由 Router

时间:2024-09-12 23:49:02浏览次数:13  
标签:Navigate js react useState 跳转 Router import

完整的项目,我已经上传了 资料链接

起因, 目的:

路由, 这部分很难。 原因是, 多个组件,进行交互,复杂度比较高。

我看的视频教程

1. 初步使用
  1. 安装:

    npm install react-router-dom

  2. 修改 index.js/ 或是 main.js
    把 App, 用 BrowserRouter 包裹起来

2. Navigate

点击按钮,会退出退出登录,然后回到首页。
在这里插入图片描述

import {
    useState } from "react";
import {
    Navigate } from "react-router-dom";

// 使用 Navigate, 跳转页面。
// Navigate 本身也是一个组件。 
function About() {
   
  const [username, setUsername] = useState("mario");

  // 如果用户名无效,或是用户没有登录。 那么把页面跳转到 Home!
  // replace={true}, 跳转后,回不去了。
  if(!username) {
   
    return <Navigate to

标签:Navigate,js,react,useState,跳转,Router,import
From: https://blog.csdn.net/waterHBO/article/details/142108837

相关文章

  • [前端][JS]html中js不同位置的区别
    里面,写到下面,这三种有什么区别?javascript代码写在<head>里面:由于这时候网页主体(body)还未加载,所以这里适合放一些不是立即执行的自定义函数,立即执行的语句则很可能会出错(视浏览器而定)javascript代码写在<body>里面:这里可以放函数也可以放立即执行的语句,但是如果需要和网页......
  • 大模型代码对接(fetchEventSource、hightlight.js
    <template> <a-modal class="modal-container" style="min-width:1180px;" :visible="modalState.visible" :footer="null" :bodyStyle="{padding:0,borderRadius:'8px'}" :loading=&......
  • uniapp vue3使用crypto-js加密解密
    开启crypto-js加密解密的研究历程如何查看crypto-js的版本号?检查crypto-js是否正常我是这样认为的Nativecryptomodulecouldnotbeusedtogetsecurerandomnumber.本机加密模块无法用于获取安全随机数。PC端调试好好的,然后在微信小程序,安卓模拟器,真机调试就......
  • js写法例子记录
    1.前端校验汉字、特殊字符、数字等1.判断字符长度://附言校验varpostscriptBlur=(rule,value,callback)=>{if(value==""||value==null){ callback(newError('必输项不能为空'));}else{ varlen=0; for(vari=0;i<value.length;i++){ //......
  • 使用Code-Like Prompt重构ReAct
    ReAct的主要就是备用来调用函数,现在给出一个使用Code-Like的Prompt,同样支持外部函数调用稍微修改一下choose_action,应该就可以实现一次性调用多个外部工具.支持Json返回,而且返回很稳定.ReActinCode-Like#youareaprocess,followthecode.importjsonfromty......
  • 面试-JS Web API-JSONP和cors
    JSONP(JSONwithPadding)JSONP是通过<script>标签来实现跨域数据传输的技术。它是为了绕过浏览器的同源策略限制而诞生的。访问一个网址,服务端一定返回一个html文件吗?---不是的服务器可以任意动态拼接数据返回的,只要符合html格式的要求就可以。JSONP的工作原理:客......
  • js | TypeError: Cannot read properties of null (reading ‘indexOf’) 【解决】
    js|TypeError:Cannotreadpropertiesofnull(reading‘indexOf’)【解决】描述概述在前端开发中,遇到TypeError:Cannotreadpropertiesofnull(reading'indexOf')这类错误并不罕见。这个错误通常表明你试图在一个null值上调用indexOf方法,而null是一......
  • 面试-JS Web API
    手写一个简易的Ajax跨域的常用实现方式GET请求//创建一个XMLHttpRequest对象constxhr=newXMLHttpRequest();//初始化一个GET请求//第三个参数true表示异步,一般都为truexhr.open('GET','/data/test.json',true);//设置事件处理函数,当readyState......
  • 一个用于管理多个 Node.js 版本的安装和切换开源工具
    大家好,今天给大家分享一个用于管理多个Node.js版本的工具 NVM(NodeVersionManager),它允许开发者在同一台机器上安装和使用不同版本的Node.js,解决了版本兼容性问题,为开发者提供了极大的便利。在开发环境中,特别是在处理多个项目时,每个项目可能依赖于不同版本的Node.js,NVM提供......
  • Langchain.js如何实现RAG
    前面介绍了Langchain的基本使用方法。仅仅是对GPT方法的封装还不足以让它赢得那么多的Start,以及获得融资。它还有另一个强大的功能-RAG(检索增强生成)。RAG是大模型跟企业内部业务落地的基石。是大模型的北斗导航,可以让大模型的结果更加精准。一、RAG的基本概念与实现流程基于大......