React 中使用路由 react-router-dom
在 React 前端项目中，可以使用路由来对各个页面进行跳转 url 的控制。React 路由可以使用 react-router-dom 包。通过 Router 声明路由。
路由 Router
在 React 中使用路由 react-router-dom 包。通过 Router 声明路由。
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Inbox from '../view/inbox'
class LinkRouter extends Component {
constructor(pros) {
super(pros)
}
render() {
return (
<Router>
<Switch>
<Route path="/inbox" component={Inbox}/>
</Switch>
</Router>
)
}
}
export default LinkRouter这样，在项目中就有了一个能跳转到 inbox 页面的路由，只要在地址栏中输入 http://localhost:3000/inbox 就可以看到 inbox 的内容。
路由跳转 Link
接下来就需要使用这个路由了，在 React 中需要使用 Link 标签来使用路由，进行跳转，而 Link 标签是要和Route 标签是同一级的。
class LinkRouter extends Component {
constructor(pros) {
super(pros)
}
render() {
return (
<div>
<Router>
<Switch>
<Route path="/inbox" component={Inbox}/>
<Link to="/inbox">inbox</Link>
</Switch>
</Router>
</div>
)
}
}
export default LinkRouter这样就能看到 inbox 这个字符编程超链接了，我们可以在浏览器中看到，Link 标签实际上是将自己本身编译成了 a 标签去使用的。点击超链接就能发现页面跳转到了inbox的页面。 因为 Link 必须和 Route 同级或者 Switch 下级的，这就意味着项目的根标签——通常是 <App/> 是被嵌套在这个路由中的，这样才能直接在项目的其他组件页面中使用 Link 标签 。
ReactDOM.render(
<Router>
<Switch>
<Route path="/inbox" component={Inbox}/>
<Link to="/inbox">inbox</Link>
</Switch>
</Router>,
document.getElementById('root')
);这样就会在项目入口文件中，混入很多代码，所以可以对这个路由进行一个封装。将项目的根标签通过参数传入，并且放在和 Route 同级或者 Switch 下级的地方。
class LinkRouter extends Component {
constructor(pros) {
super(pros)
}
render() {
return (
<div>
<Router>
<Switch>
<Route path="/inbox" component={Inbox}/>
{this.props.app}
</Switch>
</Router>
</div>
)
}
}
export default LinkRouter修改后的入口文件可以这样写：
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import LinkRouter from './routers'
ReactDOM.render(
<LinkRouter app={<App/>} />,
document.getElementById('root')
);这样就构建了一个路由组件，在这个组件中可以放入所有的路由。在项目中，就直接使用 Link 标签进行路由的跳转就可以了。