如何根据 reactjs 中的 url 查询参数更改 header 部分

Question

我已经使用 ReactJS 开发了网络应用程序，当我将一个页面导航到另一个页面时，header 文本应该根据 url 进行更改（我创建了 header 组件并且我确实导入了所有页面）如何实现这个

Answer 1

如果您使用客户端使用javascript来处理它：

componentDidUpdate(){
 var path= window.location.pathname; // lets imaging that url is "/home/x"
 var pathArray = path.split( '/' );
 var loc= pathArray[2];//number of part of url that is changing, here it rerurns x
 if(loc === "product"){ // if x be "product" it returns true
  //do somting
 }
}

如果使用服务器端呈现而不是使用 "var path= window.location.pathname;"，最好将 URL 路径保存在存储中并在您的组件中使用它。

如何根据 reactjs 中的 url 查询参数更改 header 部分

How to change header section based on url query param in reactjs

react-redux