React路由 react-router-dom

React的路由：

首先我们创建一个React应用

npm install -g create-react-app create-react-app demo-app cd demo-app

安装路由

npm install react-router-dom npm add @babel/runtime

 

接下来，将以下任一示例复制/粘贴到中src/App.js。

第一个示例：基本路由

在此示例中，路由器处理了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>; }

       ←运行结果