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