鍍金池/ 問答/HTML5  HTML/ React Router v4,為什么path變了,頁面卻沒有相應(yīng)的改變?

React Router v4,為什么path變了,頁面卻沒有相應(yīng)的改變?

路由文件:

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'頁面出現(xiàn) 1,點擊'222222'頁面出現(xiàn)2
實際:
圖片描述

圖片描述

點擊兩個Link,頁面并沒有實時更新,但是直接改變url按enter則可實現(xiàn)期望.

回答
編輯回答
厭惡我

從 id/1 到 id/2 T組件不會被卸載，也不會重新創(chuàng)建，只是傳入了新的 props，所以不會觸發(fā)生命周期的 constructor，所以 state.id 不會發(fā)生改變。你可以直接從 props 中讀取參數(shù)，或者在 componentWillReceiveProps 中給 state.id 設(shè)置新值：

render() {

  return (
    <div>
      {this.props.match.params.id}
    </div>
  )
}
2018年5月9日 21:51
編輯回答
爛人

你去官網(wǎng)看下withrouter　用一下試試

2017年1月9日 02:52
編輯回答
涼薄

你這么寫,從/id/1 到 /id/2 組件T沒有更新,
你的state.id初始就被設(shè)置成1,跳到2不會再次執(zhí)行所以一直是1

2018年7月17日 06:18
編輯回答
壞脾滊

因為你的兩個組件是一樣的，如果你的組件上放一個GIF是會發(fā)現(xiàn)刷新的

2018年8月24日 09:36