React路由的实现需要安装 react-router 或 react-router-dom 。
react-router 与 react-router-dom 的区别
- react-router
提供了一些router的核心组件, 包括Router、Route、Switch组件等，但是没有提供 dom 操作进行跳转的api。
- react-router-dom
基于 react-router , 并提供了 BrowserRouter、Route、Link等组件，我们可以通过dom的事件控制路由。例如点击一个按钮进行跳转，大多数情况我们都是使用的 react-router-dom。
基础使用
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
const App = () => {
return (
<BrowserRouter>
<div>
<ul>
<li><Link to="/">home</Link></li>
<li><Link to="/list">list</Link></li>
<li><Link to="/about">about</Link></li>
</ul>
<hr></hr>
<>
{/* 在此渲染不同的内容 */}
<Route path="/" component={Home} exact></Route>
<Route path="/list" component={List}></Route>
<Route path="/about" component={About}></Route>
</>
</div>
</BrowserRouter>
)
}
const Home = () => (
<div>
<h2>Home</h2>
</div>
);
const List = () => (
<div>
<h2>List</h2>
</div>
);
const About = () => (
<div>
<h2>About</h2>
</div>
);
ReactDOM.render(<App />, document.getElementById('root'));
