Build a front-end development project from scratch based on Vite, Typescript, React, react-router-dom, Redux, Reduxjs/toolkit, and Ant Design vite project initialization Native environment node v16.14.2 npm 8.5.0 yarn 1.22.18 vite project initialization yarn create vite Follow the steps to enter the project name, select React for the framework, and use TypeScript for js to create […]
Tag: react-router
How to use react-router v6 to quickly build routing?
Foreword I have been using react-router V5 before. The last time I built a small project, I downloaded react-router V6. I thought there was no difference, so I just used it according to the v5 set. It was just a small function, but it couldn’t help me. Then I ran it with full confidence, but […]
Super practical! React-Router v6 implements page-level button permissions
Hello everyone, I am Wang Tian~ Today we use reac + reactRouter to implement page-level button permissions. This article is divided into three parts, implementation ideas, code implementation, and pitfall records. Friends who find it verbose, just drag it to the second chapter to read the code. Foreword Normally, when we add permissions for users, […]
react routing 02 – the use of routing tables in react-routerV6 (use of useRoutes hook + data routing createBrowserRouter API + RouterProvider component)
react routing 02 – the use of routing tables in react-routerV6 (use of useRoutes hook + data routing createBrowserRouter API + RouterProvider component) 1. Not using routing tables 1.1 About the simple use of react-routerV6 routing 1.2 No routing table configured 2. Routing table-useRoutes hook 2.1 Configure routing table 2.2 First-level routing component-useRoutes hook 2.3 […]
Create react scaffolding project – demo (react18 + react-router 6) + react project packaging and deployment
Create react scaffolding project – demo (react18 + react-router 6 + react project packaging and deployment) 1. Install create-react-app 1.1 Execute the installation command 1.2 Problems encountered during installation 1.2.1 Problem 1–npm ERR! code ENOTFOUND 2. Create a project 2.1 Create project command 2.2 View project structure 2.2.1 Directory structure 2.2.2 Points to note 3. […]
react routing 01 – several ways to pass parameters in routes in react-routerV6
react routing 01 – several ways to pass parameters in routes in react-routerV6 1 Introduction 1.1 About react-router, go to the official website 1.2 react scaffolding demo 2. Simple routing configuration – no parameters 3. Routing parameter transmission method 3.1 params parameters 3.1.1 params parameters – useParams hook 3.1.2 params parameter–useMatch hook 3.2 search parameters […]
React’s react-router-dom
official document 1. What is routing Front-end routing refers to a technique that associates browser URLs with specific pages or views. In traditional web development, when a user clicks a link or enters a URL, the server receives the request and returns the corresponding HTML page. In front-end routing, when a user clicks a link […]
react-router6|routing
1. Overview Official Documentation: Home v6.4.1 | React RouterReact Router is published on npm in three different packages, they are: react-router: The core library of routing, which provides a lot: components, hooks. react-router-dom: Contains all content of react-router, and adds some components dedicated to DOM, such as etc. react-router-native: Include all content of react-router, and […]
The difference between react-router version 5 and version 6
During the study, it was found that there are many differences between react-router5 and 6, so it is recorded here. 1. The registration route is written differently: router@5: <Route path=’home’ component={home} /> router@6: <Route path=’home’ element={<home/>} /> 2. Abandon Switch and change it to Routes for consistent usage outer@5: {/* Switch improves routing matching efficiency, […]
react-router details added
1. react-router-dom v5 routing information acquisition HomeHead.jsx: import React from “react”; import {<!– –>Link, withRouter, useHistory, useLocation, useRouteMatch} from ‘react-router-dom’ import styled from “styled-components”; const NavBox = styled.nav` a { margin-right: 10px; } `; // const HomeHead = function() {<!– –> // return ( // <NavBox> // <Link to=”/a”>A</Link> // <Link to=”/b”>B</Link> // <Link to=”/c”>C</Link> […]