You should not use Link outside a Router

Promblem

React项目中适应`react-router-dom`组件时提示

You should not use <Link> outside a <Router>

---

Reason

React-route v4 版本后，不允许在`Router`外部使用`Link`；需要这样使用

<div className="routeMap">
	<BrowserRouter>
		<Tabbar/>
		<div>
			<Route path="/home" component={Home}></Route>
			<Route path="/category" component={Category}></Route>
			<Route path="/search" component={Search}></Route>
			<Route path="/cart" component={Cart}></Route>
			<Route path="/user" component={User}></Route>
		</div>
	</BrowserRouter>	
</div>

而不只是这样

<div className="routeMap">
	<Tabbar/>
	<BrowserRouter>
		<div>
			<Route path="/home" component={Home}></Route>
			<Route path="/category" component={Category}></Route>
			<Route path="/search" component={Search}></Route>
			<Route path="/cart" component={Cart}></Route>
			<Route path="/user" component={User}></Route>
		</div>
	</BrowserRouter>	
</div>

---

Resolution

使用BrowserRouter对Link进行包裹；具体可以参见stackoverflow

---

参考文献

1. https://stackoverflow.com/questions/48640280/you-should-not-use-link-outside-a-router