React ---- 路由配置与传参

安装 rect dom 包

路由的传参方式

1. params
2. query search
   转换方法 引入
3. state

search 获取
this.props.location.search
【获取到的是一个urlencode编码字符串，需要借助querystring解析】

转换:

引入 import qs from ‘querystring’
使用
qs.stringify() //对象转字符串
qs.parse() //字符串转对象

获取
state 获取 this.props.location.state

1. yarn add react-router-dom

2. 在src下创建 router.js 文件 并替换代码

      import React from 'react';
      //   模拟路由       Hash 方式  
      import { BrowserRouter, HashRouter, Route, Link, Switch } from 'react-router-dom';

      import App from './App.js';

      const Router = () => (
        // 官方切换 组件
        <BrowserRouter>
          <App />
        </BrowserRouter>
        // <HashRouter>
        // Hash 方式跳转 
        // </HashRouter>
)

export default Router;

3. 修改index.js文件 把App.js 换成 Router.js

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './style/index.scss';
    // import App from './App.js'  修改成 Router 
    import Router from './router';
    import reportWebVitals from './reportWebVitals';

    ReactDOM.render(
      <React.StrictMode>
        <Router />
      </React.StrictMode>,
      document.getElementById('root')
    );

    // If you want to start measuring performance in your app, pass a function
    // to log results (for example: reportWebVitals(console.log))
    // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
    reportWebVitals();

4. 把App.js 改成一个类组件 并增加一个Switch

添加页面的3步

1. import 导入某个组件
2. 自定义url目录关联对应导入组件

import React, { Component } from 'react';
import { NavLink, Switch, Redirect, Route } from 'react-router-dom';

import Home from './View/Home'
import One from './View/One';
import Show from './View/Showhide'
import Web from './View/Web'
class App extends Component {
  
  render() {
    return (
      <React.Fragment>
        <NavLink exact to="/">Home</NavLink>
        <NavLink to="/one">one</NavLink>
        <NavLink to="/web/1">1908</NavLink>
        {/* <NavLink to={{ pathname: 'web', state: { id: 3 } }}>1908</NavLink> */}
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/one" component={One} />
          <Route path="/show" component={Show} />
          {/* 动态路由 */}
          <Route path="/web/:uid" component={Web} />

        </Switch>
      </React.Fragment>
    )
  }
}

export default App

向路由组件传递 search query 参数

    <Link to ={ `home/message/?id=${id}&title=${title}`}>

    // 路由不用接受
    
    <Router  pach='home/message'/>

Link 开启 replace 模式

加上replace 属性

NavLink 与 Link 区别

NavLink 有默认样式 用在导航上
Link 没有默认样式 用在普通跳转

路由配置重复问题？

路由配置时 如果有相同的路径，会显示相同路径下的所有子组件内容，如果2相同路径之前的其他路径很多会消耗性能

路由匹配到第一个就不向下匹配了使用 什么标签  用 <Switch> 标签包裹路由 ，只显示匹配到的第一个组件的内容。

三种传参方式的区别

1. params 传递参数 地址栏是 /home/one 的 路由 需要配置接受参数 使用this.props.match.params 接受

2. query search 地址栏是 ?home=home&id=id 路由不需要配置接受参数 使用this.props.location.search 接受 【需要使用 querystring 转换一下】

3. state 地址栏 不显示参数 link 传参必须是一个对象 路由无需配置 使用 this.props.location.state 接受 【强制刷新页面刷新会丢失】

state 刷新不丢失原理: 地址栏参数被保存在history.location中了,history会有历史记录所以刷新不丢失,

  <Link to={ {pathname:'/home/one',state:{naem:'wei',id:1}} }>


  // 强制页面刷新丢失解决方法 :  解构时加一个默认值
 
  this.props.loaction.state || {}  // 如果有值取值，无值用空对象