關於react-router最新版本的使用
阿新 • • 發佈：2019-09-30
現在react-router已經更新到了5.1.1版本，在一些使用方法上較之前有了很多改變，現做初步列舉，以後會陸續更新。
關於引入react-router和基本使用
舊版本中引入react-router的方式先安裝:
npm install --save react-router然後引入：
import { Router, Route, Link } from 'react-router'而現在需要安裝react-router-dom包：
npm install react-router-dom然後引入：
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
需要值得注意的一點是，舊版本可以引入react-router包和react-router-dom包其中之一，而現在若是引入前者，在使用Link時則會報錯：
關於Link的使用，現行版本要求必須置於
所以，
import React from "react";
import '../src/scss/App.scss';
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Home from '../src/components/Home';
import About from '../src/components/About';
import Users from '../src/components/Users';
function App() {
return (
<Router className="App">
<div className="App-header">
<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>
);
}
export default App;