Build a front-end development project from scratch based on Vite4, Typescript, React18, react-router-dom6.4, Redux4, Reduxjs/toolkit, and Ant Design5.9

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 […]

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 […]

The use of reac18 and react-router-dom6 redux8 in the project and some knowledge accumulation

Cross-domain Address creat-react-app.dev/doc Installation: npm install http-proxy-middleware –save Create src/setupProxy.js Remember to restart the application if you get an error. const {<!– –> createProxyMiddleware } = require(‘http-proxy-middleware’); module.exports = function (app) {<!– –> app. use( ‘/api’,//interface prefix createProxyMiddleware({<!– –> target: ‘https://i.maoyan.com’,//Address to be forwarded to changeOrigin: true, }) ); }; Routing v6 Global use: in […]

React-router-dom6, the difference between react routing 6 and 5, understand react-router-dom6 in one article

router-router-dom6 is the latest version of the current react routing. It will be released in November 2021. It is already the recommended version of routing Changes in react-router-dom6 Upgrade Switch to Routes Route matching component parameter changed from component to element Relative path identification (the child route does not need to complete the path of […]

vite+react+ts+mobx+antd+react-router-dom+sass+tailwindcss

I have written a lot of Vue projects. Recently, I want to change the react technology stack and exercise my own technology. Let’s start creating projects without talking nonsense. Writing this blog is just to record the process of my creation. Unreasonable versions will inevitably have pitfalls. Welcome to share and discuss together! 1. npm […]

react-router-dom

Single-page application (SPA), front-end routing changes will not refresh the page, and will not send requests to the server Routing is divided into front-end routing and back-end routing. Both front-end and back-end routing are a key-value pair. Front-end (path, component), one route corresponds to one component Backend (path, function), a route corresponds to a processing […]

An example of the difference between React-Router-Dom v6 and the old version of Cool Tour Link

Now react-router-dom v6 version has changed a lot For example [Cool Tour Link Nana Commissioner kw98 points ㄇ E ㄒ provide]: The use of custom components in routes is no longer supported, which means that Layout cannot be directly referenced. Switch is also not supported, you need to use routes instead, and use “element” as […]

[Solved] React solves the error in react-router-dom ^6.0.2: A <Route> is only ever to be used as the child of <Routes>

npm add react-router-dom and write the route after importing the module, but an error is reported: A is only ever to be used as the child of . This is because react-router-dom version 6.0.2 or later has changed the way the router is written. If you want to follow the previous writing method, you can […]

[Solved] Using react-router-dom-v6 routing error in vite Uncaught SyntaxError: Unexpected token ‘<‘

react-router-dom – In the v6 version, the useRoutes hook is used to manage the routing table uniformly. Export the routing table module to management. Then use it in the App. Projects built with vite Using react-router-dom-v6 routing error in vite Uncaught SyntaxError: Unexpected token ‘