安装与最小应用

React Router安装方式没有变化,依旧可以使用NPM或者Yarn来完成,只是安装的库的名称会有不同。

npm install react-router-dom@6
yarn add react-router-dom@6

在应用中完成React Router的安装以后,就可以使用其来编写应用了,以下是一个React Router最小应用的示例。

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './component/About';

ReactDOM.render(
  <BrowserRouter>
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="about" element={<About />} />
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

当然在这个最小的应用示例中,还需要使用Link组件来生成导航,其具体使用将在后续的章节中详细说明。