React Router v4 路由参数不渲染/刷新

Posted 2023-02-22

【中文标题】React Router v4 路由参数不渲染/刷新

【英文标题】：React Router v4 routes with parameters not rendering/refreshing

【发布时间】：2019-01-10 07:17:58

【问题描述】：

我有一个动态参数的路由。例如，当 url 为 my-app.com/about 时，它将从关于页面的 REST API 获取 JSON 数据。我为所有 URL 参数使用了一个名为 Page 的组件。

当我点击导航链接时，网址会发生变化，但除非我刷新页面，否则不会呈现新内容。

我的代码：

class App extends Component 
  render() 
    return (

        <BrowserRouter>
            <div>

                <NavLink to='/home'>Home</NavLink>
                <NavLink to='/about'>About</NavLink>
                <NavLink to='/contact'>Contact</NavLink>                 

                <Switch>                                                                  
                  <Route path="/:slug" component= Page  />                                    
                </Switch>

            </div>
          </BrowserRouter>

    );
  

我的页面组件。我正在获取 JSON 以呈现页面内容：

import React,  Component  from 'react';
import axios from 'axios';

class Page extends Component 

    constructor() 
      super();
      this.state = 
        page: []
      ;
    

  componentDidMount()  
    axios.get('http://example.com/wp-json/wp/v2/pages?slug=' + this.props.match.params.slug)
    .then(response => 
      this.setState( page: response.data );
    )
    .catch(error => 
        console.log(error);
    );
  

  render() 
    return (

      <div>
        <h2>Single Page template</h2>
        this.state.page.map(single => 
            return(
            <div>
              <h1>single.title.rendered</h1>
              <p>single.content.rendered</p>
            </div>                                        
            );
        )
      </div>
    );
  


export default Page;

当我点击不同的链接时，如何在路由器中呈现新数据？无需在我的浏览器中重新加载页面。

【参考方案1】：

componentDidMount只在组件挂载时运行，当URL改变时slug变量会改变，但组件不会被卸载重新挂载。

您必须检查componentDidUpdate 中的slug 参数是否已更改，如果是，请获取您的数据。

示例

class Page extends Component 
  state = 
    page: []
  ;

  componentDidMount() 
    this.getPageData();
  

  componentDidUpdate(prevProps) 
    if (prevProps.match.params.slug !== this.props.match.params.slug) 
      this.getPageData();
    
  

  getPageData = () => 
    axios
      .get(`http://example.com/wp-json/wp/v2/pages?slug=$this.props.match.params.slug`)
      .then(response => 
        this.setState( page: response.data );
      )
      .catch(error => 
        console.error(error);
      );
  ;

  // ...

【讨论】：

在所有特定于 react 的问题中标记 js 有什么意义，一个 js 极客但对 react 不适应的人如何在这方面有所帮助 :) 顺便说一句，你做得很好，看到图表很神奇 :)

@MayankShukla 谢谢。我认为有相当多的 javascript 重叠，它还提供了语法突出显示。但你是对的，不是真的针对这个特定的问题。