react + react-router + redux + ant-Desgin 搭建react管理后台 -- 路由搭建(四)
前言
学习总结使用,博客如中有错误的地方,请指正。改系列文章主要记录了搭建一个管后台的步骤,主要实现的功能有:使用路由模拟登录、退出、以及切换不同的页面;使用redux实现面包屑;引入使用其他常用的组件,比如highchart、富文本等,后续会继续完善。
github地址:https://github.com/huangtao5921/react-antDesgin-admin (欢迎Star)
项目展示地址:https://huangtao5921.github.io/react-admin/
一、安装react-router-dom
上一篇文章中 react + react-router + redux + ant-Desgin 搭建react管理后台 -- 引入ant-Desgin并测试(三)我们已经将文件添加并成功引入了ant-Design。
接下来我们要开始将项目的路由搭建出来,这里我们使用的是React-router V4。
首先,执行如下命令安装 react-router-dom
,
主要用到react-router-dom 中的
Route, Switch, Redirect。这里会涉及到 react-router 与 react-router-dom的区别,其实react-router实现了路由的核心功能,而react-router-dom基于react-router,且添加了一些DOM类的组件,比如<Link>、<BrowserRouter>、<Switch>等,我们只需要引入react-router-dom即可。
$ yarn add react-router-dom --save-dev
安装成功后,我们改写一下每个页面的代码,并将组件导出,比如:首页的home.js改成如下,其他页面类似
import React from 'react'; class Home extends React.Component { render() { return ( <div>首页</div> ); } } export default Home
二、配置路由
改写我们的代码,这里改写的思路是:需要登录才能看到的页面的路由配置,我们全部放到routes/index.js中,我取名叫做Main,登录页以及Main的路由我们放在App.js中。index.js
中需要引入 BrowserRouter。具体改写如下:
routes/index.js如下,写好之后在根目录下的App.js引入
import React from 'react'; import { Route, Switch } from 'react-router-dom'; import Home from '../pages/home/Home'; import Connect from '../pages/user/connect/Connect'; import List from '../pages/user/list/List'; import Rich from '../pages/tool/rich/Rich'; import NotFind from '../pages/notFind/NotFind'; class Index extends React.Component{ render() { return ( <Switch> <Route exact path="/" component={ Home }/> <Route path="/user/connect" component={ Connect }/> <Route path="/user/list" component={ List }/> <Route path="/tool/rich" component={ Rich }/> <Route component={ NotFind }/> </Switch> ); } } export default Index;
根目录下的App.js如下,写好之后,在根目录的index.js中引入
import React from 'react'; import { Route, Switch, Redirect } from 'react-router-dom'; import './app.css'; import Login from './pages/login/Login'; import Main from './routes/Main'; class App extends React.Component { render() { return ( <div className="App"> <Switch> <Route path="/login" component={ Login } /> <Route path="/" component={ Main }/> <Redirect to="/"/> </Switch> </div> ); } } export default App;
根目录下的index.js如下:
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; ReactDOM.render( <BrowserRouter> <App/> </BrowserRouter> , document.getElementById('root'));
当上面的路由都处理好之后,运行我们的项目,此时在3000端口打开,http://localhost:3000/,路由命中了我们的首页,页面展示的就是“首页”2个字。我们再尝试在浏览器中输入其他的一些路由,看看是否都成功,如果跟我下面的图展示的是一样的话,说明路由配置已经成功了,现在项目能根据不同的url访问到我们不同的页面了。
比如:http://localhost:3000/login访问的是登录页
http://localhost:3000/user/list访问的是用户列表页,其他的页面同理
注:交流问题的可以加QQ群:531947619
下一篇:react + react-router + redux + ant-Desgin 搭建react管理后台 -- 页面布局(五)