路由的意思就是分页,实现不同页面的跳转。
在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>
)
}
}