搭建一个简单的react router工程

1.创建一个新的 React 工程：可以使用 create-react-app 脚手架工具来快速创建一个新的项目，命令行输入 npx create-react-app my-app 即可创建一个名为 my-app 的新项目。

2.安装 react-router-dom 库：在命令行中运行 npm install react-router-dom 或者 yarn add react-router-dom 来安装该库。

3.在 App.js 文件中引入 react-router-dom 库，并在需要路由的组件外层包裹 <BrowserRouter> 组件。例如：

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

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;
 

4.在 components 目录下创建 Home.js 和 About.js 文件，并编写对应的组件代码。例如：

Home.js：

import React from 'react';

function Home() {
  return (
    <div>
      <h1>Home</h1>
      <p>Welcome to the home page!</p>
    </div>
  );
}

export default Home;
 

About.js：

import React from 'react';

function About() {
  return (
    <div>
      <h1>About</h1>
      <p>This is the about page.</p>
    </div>
  );
}

export default About;
 

5.在命令行中运行 npm start 或者 yarn start 启动应用程序，并在浏览器中访问 http://localhost:3000/ 和 http://localhost:3000/about 来查看路由的效果。

这样就可以快速搭建一个简单的 React Router 工程了