React 个人学习笔记

最新推荐文章于 2023-08-15 13:36:25 发布

Bowen_Yang

最新推荐文章于 2023-08-15 13:36:25 发布

阅读量1k

点赞数

分类专栏：前端学习文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/qq_39627843/article/details/121310872

版权

这篇博客详细记录了如何使用create-react-app创建React项目，以及如何安装和使用react-router-dom进行页面路由管理。作者提到了react-router-dom的新版本变化，并提供了官方教程链接。此外，还介绍了在React项目中集成TypeScript的方法，包括新项目和旧项目的不同步骤，以及在使用TypeScript时可能遇到的问题和解决方案。

摘要由CSDN通过智能技术生成

创建项目：

1、如果没有react脚手架，先安装一个

npm install -g create-react-app

2、创建

create-react-app my_project

3、启动

npm start

react-router-dom的使用：

首先是安装

npm install react-router-dom

然后是在需要的界面进行引入

import { Link, Route, Routes } from "react-router-dom";

最后是使用，使用link定义点击的入口，routes里面包裹具体的路由关系，路由匹配后显示对应的组件（注意老版本的react-router是用的<Route path="/xxx" component={Test}/> 的写法）

{/* 相当于a标签 */}
        <Link to="/test1">go to test1</Link>
        <Link to="/test2">go to test2</Link>

        {/* 定义路由关系 */}
        <Routes>
          <Route path="/test1" element={<Test/>}></Route>