首先我们创建一个React应用
npm install -g create-react-app create-react-app demo-app cd demo-app在此示例中,路由器处理了3个“页面”:主页,“关于”页面和“用户”页面。在不同的<Link>s 上单击时,路由器将呈现匹配项<Route>。
注意:在幕后,<Link>会<a>使用real 渲染一个href,因此使用键盘进行导航或屏幕阅读器的人仍然可以使用此应用。
import React from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; export default function App() { return ( <Router> <div> <nav> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/users">Users</Link> </li> </ul> </nav> {/* A <Switch> looks through its children <Route>s and renders the first one that matches the current URL. */} <Switch> <Route path="/about"> <About /> </Route> <Route path="/users"> <Users /> </Route> <Route path="/"> <Home /> </Route> </Switch> </div> </Router> ); } function Home() { return <h2>Home</h2>; } function About() { return <h2>About</h2>; } function Users() { return <h2>Users</h2>; }←运行结果