React学习之路由信息

会使用属性来传入相应的组件

## history属性

它不是window.history对象，我们利用该对象进行无刷新跳转地址

**为什么不直接使用window.history对象**

1.React-Router中有两种模式，HashRouter（hash），BrowserRouter（history）如果使用window.history，只能支持一种模式

2.当使用window.history.pushState方法是，没有办法收到通知，将导致React无法知道地址发生了变化，结果导致无法重新渲染组件

　push：将某个新的地址入栈（历史记录栈）

　　参数1：新的地址

　　参数2：可选，附带的状态

　replace：将某个新的地址替换为当前栈中的地址

　　参数1：新的地址

　　参数2：可选，附带的状态

　go：与window.history一致

　forward：与window.history一致

　back:与window.history一致

##location属性

　props.history与props.history.location完全一致.但是与window.location不同

　loaction对象中记录的是当前地址信息

　通常使用第三方库“query-string”来进行解析地址栏中的数据

　pathname:路径名

　search:地址参数

　hash:hash值

　state:附加状态

##match属性

保存了路由匹配的相关信息

-isExact：当前路径和路由的配置是否精确匹配

**向某个页面传送数据的方式**

1.使用state：在push页面时，加入state

2.使用search：在地址栏中加入数据（常用）

3.使用hash：把数据填写到hash中

4.使用params：把数据填写到路径中（常用）

-params： <Route path="/a/:year/:mouth/day" component={A} />  props.params.year = yaer

 <Route path="/a/:year？/:mouth？/day？" component={A} /> （可传可不传）

 <Route path="/a/:year（正则表达式）/:mouth？/day？" component={A} /> （用来约束year数据）

 

##非路由组件获取路由信息的方法

1.某些组件，没有放到Route组件中，而是被嵌套在普通组件中，因此它的props中没有路由信息，如果这些组件需要获取到路由信息，可以使用下面两种方式

-将路由信息从父组件一层一层传递下去

-使用react-router自带的高阶组件withRouter，包装要使用的组件，该高阶组件会返回一个新组件，新组件被注入路由信息

import React from 'react';
import './App.css';
import qs from 'query-string'
// 多个路由切换需要用 Switch 
import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'
function A(props) {
  console.log("组件A");
  console.log(props);
  return (
    <div>
      组件A的状态:{props.location.state}
      <h1>组件A</h1>
    </div>
  )
}
function B(props) {
  console.log("组件B");
  console.log(props);
  return (
    <div>
      组件B的状态:{props.location.state}
      <h1>组件B</h1>
    </div>
  )
}
function C(props) {
  console.log("组件C");
  console.log(props);
  return (
    <button onClick={e => {
      // console.log(this.props)
      if(props.location.pathname ==="/b"){
        props.history.push("/a", "获得状态A")
      }else{
        props.history.push("/b", "获得状态B")
      }
      

    }}>按钮C</button>
  )
}

function App() {
  return (
    // <>
    <BrowserRouter >
      <Switch>
        <Route path="/a/:year/:mouth/day" component={A} />
        <Route path="/b" component={B} />
      </Switch>
      <Route path="/" component={C} />
    </BrowserRouter>

    // {/* <h1>46489789</h1> */}
    // </>

  );
}

export default App;