第一个示例:基本路由
在此示例中,路由器处理了3个“页面”:主页、关于页面和用户页面。当您点击不同的<Link>时,这个路由会渲染匹配的<Route>。
注意:其实<Link>最后渲染出来是一个有真实href的标签,因此使用键盘导航或屏幕阅读器的人也可以使用react-router-dom。
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
function Home(props) {
console.log('Home=>', props);
return <h2>Home</h2>
}
function About(props) {
console.log('About=>', props);
return <h2>About</h2>;
}
function Users(props) {
console.log('Users=>', props);
return <h2>Users</h2>;
}
function App() {
return <BrowserRouter>
<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>并渲染与当前URL匹配的第一个<Route>的内容 */}
<Switch>
<Route path={'/about'}>
<About />
</Route>
<Route path={'/users'} children={<Users />}/>
<Route path={'/'}>
<Home />
</Route>
</Switch>
</div>
</BrowserRouter>
}
ReactDOM.render(<App />, document.querySelector('#root'));