Question

我有一个反应视图/wiki/:artical。当我从不同的视图转到wiki时（例如从/到/wiki/some-artiacal），我的视图会更新，但是当我从一个wiki artical转到另一个wiki时（例如/wiki/some-artiacal到{{1}页面不会使用新内容重新呈现。似乎React将它们视为相同的视图，并且不会重新呈现页面。如果我手动刷新浏览器，文章会更新，但是当我点击/wiki/some-other-artiacal时，我想要做出反应。

反应路由器文件：

<Link to='/wiki/some-other-artiacal'></Link>

Wiki组件：

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'));

Answer 1

你的组件没有重新安装，只是接收新的道具，所以你可以使用componentWillReceiveProps钩子：

...

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)
}

...

使用URL参数重新构建路由不更新视图

1 个答案: