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-页面路由配置

发表评论

提供最优质的资源集合

立即查看 了解详情