React redux 和 React router,link 变化不重新渲染视图

Question

我通过 <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/> 时呈现？

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

React redux 和 React router,link 变化不重新渲染视图

React redux and React router,link change does not re render view

reactjs

react-router

redux

react-redux

react-router-v4