React 中使用路由 react-router-dom

在 React 前端项目中，可以使用路由来对各个页面进行跳转 url 的控制。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 的内容。

接下来就需要使用这个路由了，在 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 标签进行路由的跳转就可以了。