React redux和React路由器，链接更改不会重新渲染视图[重复]

Posted 2023-02-21

【中文标题】React redux和React路由器，链接更改不会重新渲染视图[重复]

【英文标题】：React redux and React router,link change does not re render view [duplicate]

【发布时间】：2019-01-13 17:55:15

【问题描述】：

我通过<Route/> 渲染了一些<Link/> 元素和一些相应的组件

<Route/> 正在渲染的组件是 redux connect-ed。 单击链接时，地址栏中的 url 会更改，但呈现的组件视图不会更改。 但是，刷新时会呈现正确的视图。

容器组件的代码（带有路由器和链接的那个）

upload.js

import React,  Component  from "react";
import 
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
  Link
 from "react-router-dom";

import FileUpload1 from "./fileUpload1";
import FileUpload2 from "./fileUpload2";
import FileUpload3 from "./fileUpload3";

export default class Uploads extends Component 


  render() 
    return (
      <div>

        <div>
          <Link to=`$this.props.match.url/p`>Upload 1</Link>
        </div>
        <div>
          <Link to=`$this.props.match.url/t`>Upload 2</Link>
        </div>
        <div>
          <Link to=`$this.props.match.url/e`>Upload 3</Link>
        </div>


        <Router>
          <Switch>
            <Route
              path=`$this.props.match.url/p`
              render=props => (
                <FileUploadPassport ...props tabID="1" />
              )
            />
            <Route
              path=`$this.props.match.url/t`
              render=props => <FileUpload2 ...props tabID="2" />
            />
            <Route
              path=`$this.props.match.url/e`
              render=props => <FileUpload3 ...props tabID="3" />
            />
          </Switch>
        </Router>
      </div>
    );
  

这是fileUpload1

import React,  Component  from "react";

import  withRouter  from "react-router-dom";

import  connect  from "react-redux";

class FileUpload1 extends Component 
  constructor(props) 
    super(props);
    this.state = ;
  



  componentWillMount() 
    console.log("Mounting");

  

  componentDidMount() 
    console.log("mounted");
  

  render() 
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  

const mapStateToProps = (state, ownProps) => (

  test: state.initState.testStuff
);

export default withRouter(
  connect(mapStateToProps,null)(FileUpload1)
);

我尝试使用withRouter 包装fileupload1.js 文件的默认导出，但无济于事。 如何让FileUpload1 组件在单击相应的<Link/> 时呈现？

【问题讨论】：

已经尝试过标记为重复的问题的答案中建议的解决方案（如问题中所述）。这就是我问这个的原因。为什么这被标记为重复？ :(

【参考方案1】：

Link 组件从 Router 上下文更改 history，因此您需要确保 Link 组件在您的 Router 中呈现。

最好只有一个BrowserRouter component at the top of your app。

export default class Uploads extends Component 
  render() 
    return (
      <Router>
        <div>
          <div>
            <Link to=`$this.props.match.url/p`>Upload 1</Link>
          </div>
          <div>
            <Link to=`$this.props.match.url/t`>Upload 2</Link>
          </div>
          <div>
            <Link to=`$this.props.match.url/e`>Upload 3</Link>
          </div>
          <Switch>
            <Route
              path=`$this.props.match.url/p`
              render=props => <FileUploadPassport ...props tabID="1" />
            />
            <Route
              path=`$this.props.match.url/t`
              render=props => <FileUpload2 ...props tabID="2" />
            />
            <Route
              path=`$this.props.match.url/e`
              render=props => <FileUpload3 ...props tabID="3" />
            />
          </Switch>
        </div>
      </Router>
    );
  

【讨论】：

这是针对所有情况还是仅针对特定情况？

@DhavalJardosh 我不太确定我明白你在问什么，抱歉。是的，Link 组件 should get the history from context。

我问Link 总是包裹在Router? 中。因为，我使用没有Router 的Link 作为包装器并且它正在工作。我很好奇这是否不是最佳做法。顺便说一句，我会检查您提供的链接。谢谢。