如何根据命令创建React项目，如何在React项目中使用Router路由

首先，React项目运行是需要环境的，常用node.js，可以先在电脑的命令提示符中测试 。
 node -v
如果没有出现版本说明，则需要去下载安装node.js，这部分内容可以自行搜索。
本文内容全部手打，有问题的地方，请各位指正。

一、创建React项目

常见的创建React项目有很多种方式，这里介绍两种，都是使用命令提示符，也就是cmd。

1、使用 creat-react-app

首先：全局安装create-react-app

npm install -g create-react-app

然后，创建React项目，–typescript是指创建tsx文件。

create-react-app your-project-name --typescript 

2、使用 npm init vite

npm init vite

回车之后，会让你进行选择，编辑 y 输入，之后会让你输入项目名称，项目所使用的语言，然后项目就会自动生成。

二、使用Router路由

本文采用 npm init vite 的方式创建react项目。
首先需要在package.json中添加 react-router-dom 的依赖，在项目目录的cmd中，使用 npm install react-router-dom 命令进行安装依赖。
代码结构如下：

						   --> system   
   main --> app --> router --> home
                           --> user

项目初次运行时使用 npm run dev 命令。

main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { BrowserRouter } from 'react-router-dom' // 需要使用 BrowserRouter 进行包裹
import './index.css'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>,
)

app.tsx

import { useRoutes } from 'react-router-dom' 
import { router } from './routers'
import './App.css'

function App() {
  const outlet = useRoutes(router); // 使用 useRoutes
  return (
    <div>
      {outlet}
    </div>
  )
}

export default App

router.tsx （导出router路由对象数组的作用）

import Home from "../views/home";
import User from "../views/user";
import System from "../views/system";
import { Navigate } from 'react-router-dom';

export const router = [
    {
        path: '/',
        element: <Navigate to='/home' />   // 使用重定向
    },
    {
        path: '/home',
        element: <Home />
    },
    {
        path: '/user',
        element: <User />
    },
    {
        path: '/System',
        element: <System />
    }
];

home.tsx

import React from 'react';

const Home: React.FC = () => {
    return (<div>
        <div>这是Home组件</div>
        <div>里面是Home内容</div>
    </div>)
}
export default Home;

system.tsx

import React from 'react';

const System: React.FC = () => {
    return (<div>
        <div>这是System组件</div>
        <div>里面是System内容</div>
    </div>)
}
export default System;

user.tsx

import React from 'react';

const User: React.FC = () => {
    return (<div>
        <div>这是User组件</div>
        <div>里面是User内容</div>
    </div>)
}
export default User;