链接到后匹配和位置道具不更新

我没有回答完这个问题,也不打算发帖,但经过大量的研究,我发现这里没有什么。

使用React Router加载需要添加withRouter的相同组件,以便使用新url更新匹配和位置。

我的路由器链接就像 /somepart/:id 我用不同的ID链接到同一个url。从不同的组件访问时没有问题。

解决方案

import { withRouter } from 'react-router-dom'

...

class MyComponent extends Component {
    render() {
    const { myID } = this.props.match.params
    return (
        ...
    )
}

...

export default withRouter(MyComponent)

让我们考虑一个基本问题 Page 组件,使用 match.params 要链接到下一页:

import { Link } from 'react-router-dom';

export default ({match}) => {
  const id = parseInt(match.params.id);
    return (
    <React.Fragment>
      <p>This is page {id}</p>
      <Link to={`/page/${id + 1}`}>Next</Link>
    </React.Fragment>
  )
};

如果安装在一个平台上,它应该可以正常工作 Route :

import { BrowserRouter as Router, Link, Route} from 'react-router-dom';
import Page from './Page';

const App = () => (
  <Router>
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Route exact path="/" render={() => <Link to="/page/1">First Page</Link>} />
      <Route component={Page} exact path="/page/:id" />
    </div>
  </Router>
);

看见 https://codesandbox.io/s/lw9j5zq4m 举个活生生的例子。