2024年Web前端最新如何在React项目中使用Router路由_package，2024中级前端面试题

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解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 />
    },
    {
#### 最后

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。
只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。

并祝愿大家在新的一年找工作面试中胆大心细，发挥出最好的水平，找到一份理想的工作。