react-router-dom：基本路由示例

JavaScript

// 基本路由 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> <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> }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

// 基本路由 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>           <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> }