react新建一个路由页面并实现跳转

最近开始学习更新react
让我们一起开启react之旅吧
1，新建一个注册页 register.js文件

import React, { Component } from 'react'
import { Link, hashHistory } from 'react-router'
import { Progress, Button } from 'antd'

// 声明组件  并对外输出
export default class register extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props) {
    super(props)
    this.state = {
      // activeTab: 'pop' ,
    }
  }

  render() {
    return (
      <div className="">
        注册页
      </div>
    )
  }
}

2，在react-router-config.js配置路由

import React from 'react'
import { Router, Route, IndexRoute, hashHistory/* , Redirect */ } from 'react-router'
import { isLogin } from '@configs/common'
import { set } from '@config'

import * as base from '@pages/base' // 基础
import * as sysSet from '@pages/set' // 设置中心-系统设置
import * as menu from '@pages/menu' // 菜单

export default () => (
  <Router history={hashHistory}>
    <Route path="/" component={base.app} onEnter={isLogin}>
      <IndexRoute component={base.example} />
      <Route path="/desk$/index" component={base.example} />
      {/* <Route path="/socketReceive" component={base.socketReceive} /> */}
      {/** *菜单 开始 */}
      <Route path="/echarts" component={menu.echarts} />
      <Route path="/editor" component={menu.editor} />
      {/** *菜单 结束 */}
      {/** *系统设置 开始 */}
      <Route path={`/${set}/userManage`} component={sysSet.userManage} />
      <Route path={`/${set}/roleManage`} component={sysSet.roleManage} />
      <Route path={`/${set}/moduleManage`} component={sysSet.moduleManage} />
      {/** *系统设置 结束 */}
    </Route>
    <Route path="/register" component={base.register} />
    <Route path="/login" component={base.login} />
    <Route path="*" component={base.notfound} />
  </Router>
)

3,导入这个register.js文件

import developing from './developing'
import example from './example'
import login from './login'
import notfound from './notfound'
import app from './app'
// import socketReceive from './socketReceive'
import register from './register'

export { developing, example, /*  socketReceive, */ login, notfound, register, app }

4,在某个页面实现跳转
4.1 方式一：

<Button type="primary" className="cert-btn" onClick={this.register}>注册</Button>

import { hashHistory/* , Link */ } from 'react-router'
export default class Login extends Component {
  // 初始化页面常量 绑定事件方法
  constructor(props, context) {
    super(props)
    this.state = {
      loading: false,
      isCertificates: false,
      show: true,
    }
  }
  // 去注册页
  register() {
    hashHistory.push('/register')//不带参数
    hashHistory.push({
      pathname: 'register',
      query: {
        id: '1',
      },
    })//传参数
  }
}

4.2 方式二：

import {Link } from 'react-router'
<Link to={{ pathname: 'register', id: '1'}} >注册</Link>