React路由的實現(xiàn)需要安裝 react-router 或 react-router-dom 巫湘。
react-router 與 react-router-dom 的區(qū)別
- react-router
提供了一些router的核心組件, 包括Router辖众、Route、Switch組件等兴蒸，但是沒有提供 dom 操作進行跳轉(zhuǎn)的api。
- react-router-dom
基于 react-router , 并提供了 BrowserRouter细办、Route橙凳、Link等組件，我們可以通過dom的事件控制路由笑撞。例如點擊一個按鈕進行跳轉(zhuǎn)岛啸，大多數(shù)情況我們都是使用的 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>
<>
{/* 在此渲染不同的內(nèi)容 */}
<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'));
