react router 从登录页面跳转到主页面

在搭建React框架时，选择了create-react-app脚手架工具搭建。

在使用到router的时候，想法是这样的，在APP.js中配置一个简单的路由，路由包含两个，一个登录页，一个主页面。

默认在加载的时候回去加载登录页，当在登录页登录成功时，在登录函数中去校验用户名密码，成功之后跳转到主页面，显示主页面的布局什么的。

由于初识React，所有在摸索中总是漏洞百出，一头雾水，通过查资料，慢慢的找到了解决的办法。网上给出的方案挺多，但成功的就那么一种(应该是自己没有吃透的原因)。

使用history来实现

先看一下代码

index.js为默认的主入口文件，不需要做修改，它默认加载了APP.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

APP.js中定义了路由，在跳转的时候去渲染对应的组件

import React from 'react';
import { Router, Route, Link } from 'react-router-dom'
import history from './history/History'
import Index from "./modules/index/Index"
import Login from './modules/login/Login'
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div>
      <Router history={history}>
        <Route exact path="/" component={Login} />
        <Route exact path="/index" component={Index} />
      </Router>
    </div>
  );
}

export default App;

这样在执行npm start时，会根据路由去匹配渲染哪个组件。在这里注意一下history的定义

History.js定义

import { createBrowserHistory } from 'history'

export default createBrowserHistory();

就是这个两句话，之前使用的是

import { createBrowserHistory } from 'history/createBrowserHistory'

但是会报错，所示在后来的版本中会取消，于是改为上面那种写法。

在登录组件中引入history，并且在按钮提交之后，去后台check，在成功回调函数中使用history进行跳转。

import history from '../../history/History';

handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                //在这里可以校验用户名密码的合法性
                
                console.log('Received values of form: ', values);
                history.push({pathname:"/index",state:{}})
            }
        });
};

由于是公司项目，不方便粘出所有的代码，估计大家也都能看得懂，handleSubmit是在表单上绑定的submit函数，提交表单的时候会执行，执行成功后使用history.push()，就可以跳转到主页面，然后去渲染主页面。

跳转是完成了，而且点击对应的siderbar也能加载不同的组件，但是遇到个问题就是，点击siderbar也能加载不同的组件，并且能在地址栏显示正确的路径，但是刷新或者重新enter地址栏，会发现一片空白。现在还没弄明白怎么回事，还在研究中......