P23:后台管理系统开发02-页面路由配置
开发环境搭建好以后,接下来就可以设置路由了。路由的设置相当简单,所以本文内容也不会太长。(如果你还不熟悉React-router相关知识,可以到我的博客中看之前关于Router基础教程笔记)
安装 react-router-dom
进入admin
文件夹,在文件夹下,直接使用yarn
或者npm
来进行安装。我这里就使用npm来进行安装了。
npm install --save react-router-dom yarn add react-router-dom
安装完成后可以到package.json
中查看一下版本,我的版本是5.2.0,你学的时候可能版本有所变化。
使用Router
安装完成后,可以进行使用了。我们在 src文件夹下新建立一个Pages文件夹,并在Pages中建立一个最简单的Login页面(这个页面下节要详细制作),本文实现路由可以使用就可以。Login.js
文件代码如下:
import React from 'react'; function Login() { return ( <div> 我是登录页面 </div> ) } export default Login
然后再在Pages中建立一个Main.js
文件,这个文件就是配置路由的,代码如下:
import React from 'react'; import {BrowserRouter as Router, Route} from 'react-router-dom'; import Login from '../pages/Login'; function Main() { return ( <Router> <Route path="/login/" exact component={Login} /> </Router> ) } export default Main
然后配置一下index.js
import React from 'react'; import ReactDOM from 'react-dom'; import Main from './pages/Main'; ReactDOM.render(<Main />,document.getElementById('root'));
这部完成后就可以到浏览器中访问http://localhost:3000/login是否可以访问到登录页面了,如果可以访问,说明路由已经起作用了,下节就可以开始制作登录页面了。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P23:后台管理系统开发02-页面路由配置
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P23:后台管理系统开发02-页面路由配置