React 安装路由(router)及使用

项目地址:https://gitee.com/zhouyunfang/react-project

安装路由:

npm i react-router-dom

引入路由:

路由可以在index.js或都app.js引入都可以;

我在app.js中引入

引入之后一定要重启项目

// 如果觉得 BrowserRouter 名字太长可以用{BrowserRouter as Router} 后面可以用Router替代
// import {BrowserRouter} from 'react-router-dom'
import {BrowserRouter as Router , Route} from 'react-router-dom'

class App extends Component {
  render() {
    return(
      // 用Router把整个标签包裹起来
      
        

          
          
          

        
      
    )
  }
}

export default App;

路由使用(Route)

class App extends Component {
  render() {
    return(
      // 用Router把整个标签包裹起来
      
        

          
          {/* 使用路由,如果Path在根路径下就让它执行Landing ,exact 的意思是只有在path='/' 根路径下才展示landing*/}
          
          

        
      
    )
  }
}

export default App;

页面使用路由跳转

Navbar.js

引入路由提供的link 在页面中用link去替换a标签,a标签的href改成to

使用link的优势,点击跳转的时候不需要经过页面刷新 

import React, { Component } from 'react'
// 引入路由提供的link 在页面中用link去替换a标签,a标签的href改成to
import {Link} from 'react-router-dom'

class Navbar extends Component {
    render() {
        return (
            

                

                    

                        学习在线
                        
                            
                        
                        

                            

                                

                                    学习在线
                                
                            
                            

                                

                                    注册
                                
                                

                                    登录
                                
                            
                        
                    
                
            
        )
    }
}
export default Navbar;

---

 

register.js页面跳转:

注册成功后跳转至登录页面,

import {withRouter} from 'react-router-dom'

 //如果跳转在用到redux中去
 // 发送请求至authActions.js中
this.props.registerUser(newUser,this.props.history)


//在本页面底部使用跳转功能
(withRouter(Register))

在redux中的actions接收

// 用户发送请求的处理方法会在这里执行
import axios from 'axios';
// 引入type类型
import { GET_ERRORS } from './types'
//定义用户传来的来注册数据
export const registerUser = (userData, history) => dispatch => {
    // 对传过来的数据返回给到reducer(authReducer.js)进行判断,然后返回对应的数据内容
    axios.post('/api/users/register', userData)
        .then(res => {//注册成功实现路由跳转
            history.push('/login')
            //注册成功页面不需要返回,所以这里不用定义type
        }).catch(err => {
            // 在注册信息错误的时候用dispatch把信息返回回去
            dispatch({
                type: GET_ERRORS,
                payload: err.response.data
            })
        })
}