React项目如何移除bootstrap.tsx并调整index.tsx为指定路由渲染格式

算力阿峰

2026-10-16

操作步骤

第一步：确认依赖安装
首先确保你已经安装了react-router-dom，如果是TypeScript项目还需要安装对应的类型声明包，执行以下命令：

# npm 安装
npm install react-router-dom
npm install @types/react-router-dom --save-dev

# yarn 安装
yarn add react-router-dom
yarn add @types/react-router-dom --dev

第二步：重写index.tsx文件
将原来src/index.tsx里的import("./bootstrap")完全替换为以下代码，补上缺失的导入声明：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

第三步：修改App.tsx移除重复路由容器
你原来的App.tsx里已经用了HashRouter，外层index.tsx又加了BrowserRouter会导致路由冲突，需要删除App里的HashRouter，同时补上缺失的组件导入：

import { Route, Routes } from 'react-router-dom';
// 注意替换为你实际的View1Component文件路径
import View1Component from './xxx/View1Component';

interface AppProps {
  appPath?: string;
}

const App: React.FC<AppProps> = () => {
  return (
    <>
      {/* 如果你使用的是react-router v5版本，不需要包裹Routes，Route属性保持component={View1Component}即可 */}
      <Routes>
        <Route path="/" element={<View1Component />} />
      </Routes>
    </>
  );
};

export default App;