Javascript 使用URL参数响应路由不更新视图

我有一个react视图

/wiki/：artical

。当我从一个不同的视图转到wiki（例如从

/

到

/wiki/some artiacal

）时，我的视图会更新，但当我从一个wiki文章转到另一个wiki文章时（例如

/wiki/some artiacal

到

/wiki/some other artiacal

），页面不会重新显示新内容。似乎React将它们视为相同的视图，并且不会重新显示页面。如果我手动刷新浏览器，文章将更新，但我希望在单击

时对刷新做出反应

反应路由器文件：

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";


// COMPONENTS
import Header from './components/Header';

// VIEWS
import HomePage from './views/HomePage';
import WikiPage from './views/WikiPage';
import ProblemTesterPage from './views/ProblemTesterPage';
import NoMatchPage from './views/NoMatchPage';

ReactDOM.render(
    <Router>
        <div className='container-fluid'>
        <div className='row justify-content-center'>
          <div className='col-xs-12 col-lg-8'>
            <Header/>

            <div className='card'>
                    <div className='card-body'>
                        <Switch>
                        <Route exact={true} path='/' component={HomePage}></Route>
                        <Route exact={true} path='/wiki/:artical' component={WikiPage}></Route>
                        <Route exact={true} path='/tools/problem-tester' component={ProblemTesterPage}></Route>
                        <Route component={NoMatchPage}/>
                    </Switch>
                </div>      
                </div>

                <p className='footer text-center text-secondary'>©2017 MathBrainius</p>
          </div>
        </div>
      </div>
    </Router>
, document.getElementById('app'));

从“React”导入React；
从“react dom”导入react dom；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
//组成部分
从“./components/Header”导入标题；
//观点
从“./views/HomePage”导入主页；
从“./views/WikiPage”导入WikiPage；
从“./views/ProblemTesterPage”导入ProblemTesterPage；
从“/views/NoMatchPage”导入NoMatchPage；
ReactDOM.render(
©2017 MathBrainius
，document.getElementById（'app'）；

Wiki组件：

import React from 'react';
import ReactMarkdown from 'react-markdown';

export default class HomePage extends React.Component {  
  constructor(props) {
    super(props);

    this.state = {
      artical: ''
    };
  }

  componentDidMount() {
    var s = this;
    var props = s.props;

    axios.get(`/api/wiki/${props.match.params.artical}`, {
      timeout: 20000,
    })
    .then(res => {
      var ping = res.data;
      s.setState({
        artical: ping.artical
      });
    });
  }

  render() {
    var s = this;
    return (
        <div>
        <ReactMarkdown source={s.state.artical}/>
      </div>
    )
  }
}

从“React”导入React；
从“react markdown”导入react markdown；
导出默认类。组件{
建造师（道具）{
超级（道具）；
此.state={
文章：''
};
}
componentDidMount（）{
var s=此；
var props=s.props；
get（`/api/wiki/${props.match.params.artical}，`{
超时：20000，
})
。然后（res=>{
var ping=分辨率数据；
s、 设定状态({
文章：ping.artical
});
});
}
render（）{
var s=此；
返回(
)
}
}

您的组件没有重新安装，只是接收新的道具，这样您就可以使用

组件WillReceiveProps

挂钩：

...

loadData(article) {
  var s = this

  axios.get(`/api/wiki/${article}`, {
    timeout: 20000,
  })
  .then(res => {
    var ping = res.data;
    s.setState({
      artical: ping.artical
    })
  })
}

componentDidMount() {
  this.loadData(this.props.match.params.artical)
}

componentWillReceiveProps(nextProps) {
  this.loadData(nextProps.match.params.artical)
}

...

---

我相信您需要使用

组件将接收props

来获取新的

props.match.params.artical

。它几乎可以正常工作。有些东西不工作，可能是因为它是异步的？基本上，当我切换视图时，它总是落后一步。如果我在文章之间切换，它将从我单击的上一篇文章中获取文章。是的，对不起，您需要下一个道具。我已经更新了我的答案。希望现在可以工作了。谢谢你，你节省了我这么多时间！仅针对在futures中查看此内容的用户，您是否可以修复组件WilleReceiveProps？接收中的i和e切换。它不允许我编辑少于6个字符。很好。我现在已作出修订。