React路由设置

路由的意思就是分页，实现不同页面的跳转。
在React框架下需要先安装对应的依赖库：

npm install --save-dev react-router-dom

然后创建项目，我用的是WebStorm开发工具。我将App.js改为了router.js，导入包
这里需要说明一下，HashRouter和BrowserRouter可以互换使用，区别在于HashRouter在浏览器页面显示时会出现#号，如图，而BrowserRouter则不会，如图。
下面导入了3个页面，分别是IndexPage，NewsPage，NewsDetailsPage，在下方用path 指定各自的url，exact的意思是不要显示在同一页面，都是单独的个体。

import React from 'react';
import {HashRouter as Router,Route} from 'react-router-dom';//BrowserRouter
import IndexPage from './pages/index';
import NewsPage from './pages/news';
import NewsDetailsPage from "./pages/news/details";

class RouterComponent extends React.Component{
    render(){
        return (
            <React.Fragment>
                <Router>
                    <React.Fragment>
                        <Route path="/" exact component={IndexPage}></Route>
                        <Route path="/news" exact component={NewsPage}></Route>
                        {/*<Route path="/news/details/:id/:title" exact component={NewsDetailsPage}></Route>*/}
                        <Route path="/news/details/" exact component={NewsDetailsPage}></Route>
                    </React.Fragment>
                </Router>
            </React.Fragment>
        )
    }
}