react学习Day2:安装配置路由

一、react-dom和react-router-dom
React-router提供了一些router的核心api,包括Router,Route,Switch等,但是它没有提供dom操作进行跳转的api.

React-router-dom提供了BrowserRouter,Route,Link,Switch等api,可以通过dom的事件控制路由

二、安装依赖

npm install react-router-dom --save-dev

三、App.js中引入路由

import React from 'react';
// 引入路由
import {HashRouter, Switch, Route} from 'react-router-dom';
// 登录页
import Login from './pages/login/Login';
// 首页
import index from './pages/index';

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={};
  }
  render(){
    return(
      
        
          
          
        
      
    )
  }
}

export default App;

• HashRouter:使用URL中的hash(#)部分去创建路由,举例来说,用户访问(简单来说就是URL上会带#号),访问地址会变成localhost:3000/#/
• Switch:在路径相同情况下,只匹配第一个,这个可以避免重复匹配;
• exact:精准匹配