在前端应用里使用路由可以让用户在应用里通过 URL 访问应用里的不同的页面。在 React 应用里，想要使用路由功能，可以借助 React Router 提供的功能。

它的主要作用就是订阅并且操纵浏览器的 history stack，历史堆，你可以把它想成是用户的浏览的历史记录。它还可以根据浏览器当前的 URL 来匹配我们事先定义好的路由，然后显示路由地址对应的界面。

在 React Web 应用里，我们要用的是 React Router 提供的 react-router-dom 这个包。先在项目里安装一下这个包，在终端，项目所在目录的下面，执行 npm install react-router-dom@6，这里我们可以指定一下要使用的这个包的大版本，这样可以减小我们之间的差异。

在项目里创建一个文件，放在 app 的下面， 名字可以是 app.router.tsx。在文件里定义一个组件，名字是 AppRouter。

React Router 提供了几种不同类型的路由器，在浏览器上运行 React Router 推荐使用的是 BrowserRouter 。在 App 这个组件文件里，先在文件顶部导入 BrowserRouter，来自刚才我们安装的 react-router-dom 这个包。在组件的显示这里，用一组 BrowserRouter 。

然后打开应用的入口，index.tsx，在这个文件里可以导入 AppRouter 这个组件，位置是 app 下面的 app-router。删除掉导入的 App 组件。

再把应用要显示的组件，设置成这个 AppRouter。

现在应用的界面上不会显示任何东西，后面我们会在路由器里配置路由。