【React+TS】从零开始搭建react+typescript+router+redux+less+px2rem自适应+sass+axios反向代理+别名@（写到redux了）

燕京拾亿

已于 2022-05-12 15:48:35 修改

阅读量1.8k

点赞数 1

文章标签： react.js typescript less

于 2022-03-14 20:16:20 首次发布

本文链接：https://blog.youkuaiyun.com/m0_59074147/article/details/123485763

版权

本文介绍了如何使用create-react-app脚手架创建React+TypeScript项目，并详细讲解了如何配置路由，包括创建views文件夹、设置不同页面、管理路由以及在App和index文件中引入相关组件。最后，展示了如何启动项目并实现页面间的跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、通过create-react-app脚手架创建项目

npx create-react-app 项目名 --template typescript

在vscode中打开项目，可以看到顺利生成了react项目中有文件的后缀为tsx,此时说明成功创建了react+typescript项目，然后在命令提示符（也就是cmd打开的黑框）中cd+项目名进入项目，

输入npm start即可打开项目。

二、配置路由

先下载依赖

npm i react-router-dom@5.2.0 react-router-config @types/react-router-config @types/react-router-dom -S

然后在src目录下创建views文件夹，views内创建Home，About，Navbar三个tsx文件，其中Navbar用来控制路由，其他两个页面用来展示

Home:

import React, { Component } from "react";
 
export default class Home extends Component {
  render() {
    return (
      <div className="home">
        <div className="container">
          <h3 className="center"> Home页面</h3>
          <p>欢迎来到首页</p>
        </div>
      </div>
    );
  }
}

About：

import React, { Component } from "react";
 
export default class About extends Component {
  render() {
    return (
      <div className="about">
        <div className="container">
          <h3 className="center"> About页面</h3>
          <p>欢迎来到关于我们页面！</p>
        </div>
      </div>
    );
  }
}

Navbar:

import React, { Component } from "react";
 
export default class Navbar extends Component {
    render() {
        return (
            <nav className="nav-wrapper">
                <div className="list">
                    <ul>
                        <li><a href='/'>Home</a></li>
                        <li><a href='/about'>About</a></li>
                    </ul>
                </div>
            </nav>
        )
    }
}

src目录下创建routes文件夹，同时创建index.ts，使用RouteConfig对路由进行统一管理

// 导入路由组件
import Home from '../views/Home'
import About from '../views/About'
// 导入路由管理工具
import {RouteConfig} from 'react-router-config'
 
const routes:RouteConfig = [
  {
    path:'/',
    exact:true,
    component:Home
  },
  {
    path:'/about',
    exact:true,
    component:About
  },
]
 
export default routes;

App.tsx中引入Route，Navbar和路由管理工具

import React from "react";
// 引入路由导航栏
import Navbar from "./views/Navbar";
// 引入routes组件
import routes from "./routes";
// 引入包管理工具
import { renderRoutes, RouteConfig } from "react-router-config";
import "./App.css";
 
function App() {
  return (
    <div className="App">
      <Navbar />
 
      {/* 设置routes的类型为RouteConfig[]，否则报错 */}
      {renderRoutes(routes as RouteConfig[])}
    </div>
  );
}
 
export default App;

根目录index.tsx中

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter as Router } from "react-router-dom";
 
ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById("root")
);
 
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();