React-Router路由配置（重要3/3）

1、安装依赖

npm install react-router-dom --save

2、index.js中引入依赖并配置

//引入依赖
import React from 'react';
import ReactDOM from 'react-dom';
import { HashRouter as Router} from "react-router-dom";

//实例化
<Router>
  <App />
</Router>
//Router标签嵌套<App />

3、App.js

//引入依赖
import React, { Component } from 'react';
import { Route, Redirect, Switch } from "react-router-dom";
//引入你要切换的组件
import Login from './components/Login/Login';
import Indexfrom './components/Index/Index';

//实例化
render() {
    return (
      <div className="App">
        <Switch>
          <Route path="/login" component={Login} />
          <Route path="/index" component={Index} />
          <Redirect from='/' to='/login' />//此处为重定向，初始化默认加载的位置
        </Switch>
      </div>
    );
  }
}

4、通常在菜单使用到路由切换内容，菜单栏代码如下

//引入依赖
import React, { Component } from 'react';
import { Link } from "react-router-dom";

//实例化
render() {
    return (
      <div className="Homemenu">
        <div>
          <Link to={{ pathname: "/login" }} replace>
             登陆
          </Link>
        </div>
        <div>
          <Link to={{ pathname: "/index" }} replace>
             首页
          </Link>
        </div>
     </div>
    );
  }
}

React-Router是把组件初始化、销毁等一系列生命周期操作。

以前的网站是多个html跳转，而这样的效果在React中使用Router实现，且是单页面局部更新

直观作用体现在用户操作体验和性能上

以上是最简单的React-Router配置，用起来无压力