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 工程了