React Router v4,为什么path变了,页面却没有相应的改变?

Question

路由文件:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom'
import T from './component/test'

const BasicExample = () => (
  <Router>
    <div>
      <ul>
        <li><Link to="/id/1">111111111111</Link></li>
        <li><Link to="/id/2">2222222222</Link></li>
      </ul>

      <hr/>
      <Switch>
        <Route
          exact
          path='/id/:id'
          component={T}
          key={Date.now() * Math.random()}
        />
      </Switch>
    </div>
  </Router>
)


export default BasicExample

Test.js

import React from 'react'


class Test extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      id: this.props.match.params.id
    }

  }


  render() {

    return (
      <div>
        {this.state.id}
      </div>
    )
  }

}

export default Test

期望:点击'1111111'页面出现 1,点击'222222'页面出现2
实际:

点击两个Link,页面并没有实时更新,但是直接改变url按enter则可实现期望.

Answer 1

从 id/1 到 id/2 T组件不会被卸载，也不会重新创建，只是传入了新的 props，所以不会触发生命周期的 constructor，所以 state.id 不会发生改变。你可以直接从 props 中读取参数，或者在 componentWillReceiveProps 中给 state.id 设置新值：

render() {

  return (
    <div>
      {this.props.match.params.id}
    </div>
  )
}

Answer 2

你去官网看下withrouter　用一下试试

Answer 3

你这么写,从/id/1 到 /id/2 组件T没有更新,
你的state.id初始就被设置成1,跳到2不会再次执行所以一直是1

Answer 4

因为你的两个组件是一样的，如果你的组件上放一个GIF是会发现刷新的