SAAS雲平臺搭建札記: (四) AntD For React使用react-router-dom路由接收不同引數頁面不重新整理的問題

thanks發表於2021-04-26
React路由

    在.net開發員眼裡，如果使用MVC，根據路由匹配原則，可以通過各種方式接收引數，比如 /Post/List/1, /Post/List/2，或者 /Post/List?id=1，/Post/List?id=2，後端PostController中的List Action都能接收到id為1或者2的引數，進行相應操作；但是，我們使用Ant Design For React的時候，如果使用react-router-dom作為路由，不管使用哪種引數，點選不同引數頁面連結的時候，位址列裡頁面引數是變了，但是後臺頁面居然不重新整理，還是維持原先的頁面，這是怎麼一回事呢，我們來一探究竟。

    我們的思路是：在P_Index頁面裡面使用js獲取位址列引數的方法，獲取引數，進行頁面渲染，程式碼如下：

Main.js (主要的框架頁面，我們要渲染P_Index)

......
import { BrowserRouter as Router, Switch, Route, Link} from "react-router-dom";
import P_Index from './p/Index';
......
class Main extends React.Component {
......
  render() {
    return (
      <Router>
        <Layout>
          <Sider collapsible collapsed={this.state.collapsed}>
......
              <Switch>
                <Route path="/p">
                  <P_Index></P_Index>
                </Route>
.......
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default Main;

/p/Index.js （負責接收引數進行渲染的頁面）

import React from 'react';
......

export default class P_Index extends React.Component {

    //頁面引數
    pageId = window.location.pathname.split('/')[2];
    //pageId = window.location.search.substr(1);

    async componentDidMount() {
        let data =  await getData(pageId);
        this.setState({...data});
    }

    render() {
        if(this.state.type){
        switch(this.state.type){
            case "aaa":
                return (
                    ......
                );
            case "bbb":
                return (
                    .......
                );
        }

        }else{
            return ('loading')
        }
    }
}

    程式碼也很簡單，頁面載入時根據位址列引數查不同資料，改變state，然後根據獲取的資料進行渲染。

    但是，我們在位址列裡不管是輸入 /p/1 還是 /p/2 或者 /p/3，後面的頁面絲毫不變化，都是第一次渲染的頁面。頁面內打斷點，跟蹤，發現位址列改變了頁面根本就沒有重新渲染。我們又嘗試了 /p?1 、/p?2 或者 /p?id=1、/p?id=2，都一樣。這可難倒我們了，不管是html、.net WebForm、MVC，位址列一變，頁面不要重新渲染的嗎？為什麼在react裡面就不一樣了呢？

 

 （輸入不同地址頁面內容竟然一樣，而引數在第一次載入頁面的時候已經拿到了） 

 

    抱著這個疑問，我們查詢了官方的react-router-dom文件，然後根據文件結合專案，最終找到了解決的方法，摒棄了在頁面裡使用 window.location.pathname 或者 window.location.search 方式取引數的方法，直接在路由中配置。

    改進後的檔案如下：

Main.js

......
import { BrowserRouter as Router, Switch, Route, Link, useParams} from "react-router-dom";
import P_Index from './p/Index';
......

function ShowPage () {
  let { id } = useParams();
  console.log(id);
  return <P_Index id={id}></P_Index>;
};

class Main extends React.Component {
......
  render() {
    return (
      <Router>
        <Layout>
          <Sider collapsible collapsed={this.state.collapsed}>
......
              <Switch>
                <Route path="/p/:id">
                  <ShowPage></ShowPage>
                </Route>
......
              </Switch>
            </Content>
          </Layout>
        </Layout>
      </Router>
    );
  }
}

export default Main;

/p/Index.js

import React from 'react';
......
export default class P_Index extends React.Component {
    constructor(props) {
        super(props);
    }
......
    componentWillReceiveProps = async (nextProps) => {
        const { id } = this.props;
        if (id !== nextProps.id) {
            let data = await getData(nextProps.id);
            this.setState({ ...data });
        }
    }

    //頁面引數
    //pageId = window.location.pathname.split('/')[2];
    //pageId = window.location.search.substr(1);

    async componentDidMount() {
        let data = await getData(this.props.id);
        this.setState({ ...data });
    }
......
    render() {
        if (this.state.type) {
            switch (this.state.type) {
                case "aaa":
                    return (
                        ......
                    );
                case "bbb":
                    return (
                        ......
                    );
            }
        } else {
            return ('loading')
        }
    }
}

 

    我們增加了一個componentWillReceiveProps方法，該方法在每次屬性改變時都會執行，這下通過選單點選，只要位址列裡引數變化，就算是同一個頁面，頁面也會進行重新整理，資料也會發生相應變化。至此，問題完美解決！

 

    SAAS雲平臺搭建札記系列文章：

    SAAS雲平臺搭建札記: (一)淺論SAAS多租戶自助雲服務平臺的產品、服務和訂單

    SAAS雲平臺搭建札記: (二)Linux Unbutu下.Net Core整套執行環境的搭建

    SAAS雲平臺搭建札記: (三) AntDesign + .Net Core WebAPI許可權控制、動態選單的生成

    SAAS雲平臺搭建札記: (四) AntD For React使用react-router-dom路由接收不同引數頁面不重新整理的問題

 

相關文章