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 是否可以访问到登录页面了，如果可以访问，说明路由已经起作用了，下节就可以开始制作登录页面了。

以上关于P23：后台管理系统开发02-页面路由配置的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。