要运行react_router示例,您可以按照以下步骤进行操作:
node -v
npm -v
如果您看到版本号,则表示已成功安装。
npx create-react-app react-router-example
这将使用Create React App工具创建一个新的React应用程序,并自动安装所需的依赖项。
cd react-router-example
npm install react-router-dom
src
文件夹中。在该文件夹中,您将找到一个名为App.js
的文件。打开它并将其内容替换为以下示例代码:
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
const App = () => (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Route path="/" exact component={Home} />
<Route path="/about" component={About} />
</div>
</Router>
);
export default App;
这个示例代码定义了两个简单的组件(Home和About),并使用react-router-dom
库中的BrowserRouter
、Route
和Link
组件来实现基本的路由功能。
npm start
这将启动开发服务器并在浏览器中打开应用程序。
http://localhost:3000
,您将看到一个简单的页面,其中包含一个导航菜单。单击菜单中的链接,您将在页面上看到相应的内容。这样,您就成功地运行了一个基本的react_router示例。您可以根据需要扩展和修改示例代码,以满足您的具体需求。
领取专属 10元无门槛券
手把手带您无忧上云