react-router-dom 路由组件需要重新加载页面

debugcn 发表于 Dev

虹彩的

调用 history.push('/packages') 时，url 会更新，但除非重新加载页面，否则组件不会挂载（渲染）。如果我调用 createHistory({forceRefresh: true}) 或手动重新加载页面，UI 将正确呈现。如何配置 react-router-dom 以加载组件而不显式重新加载页面或使用 forceRefresh？

索引.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'
import store from './store'
import {Provider} from 'react-redux'
import App from './App'

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('app')
);

应用程序.jsx

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'
import PropTypes from 'prop-types'
import { Navbar, PageHeader, Grid, Row, Col } from 'react-bootstrap'
import LoginFormContainer from './components/Login/LoginFormContainer'
import PackageContainer from './components/Package/PackageContainer'

class App extends Component {
  render() {
    return (
      <Grid>
        <Navbar>
          <Navbar.Header>
            <Navbar.Brand><h3>Mythos</h3></Navbar.Brand>
          </Navbar.Header>
        </Navbar>
        <Row className="content">
          <Col xs={12} md={12}>
            <Switch>
              <Route path='/packages' render={() => <PackageContainer />} />
              <Route exact path='/' render={() => <LoginFormContainer />} />
            </Switch>
          </Col>
        </Row>
      </Grid>
    )
  }
}

export default App

登录操作.jsx

import * as types from './actionTypes'
import LoginApi from '../api/loginApi'
import createHistory from 'history/createBrowserHistory'

const history = createHistory()

export function loginUser(user) {
  return function(dispatch) {
    return LoginApi.login(user).then(creds => {
      dispatch(loginUserSuccess(creds));
    }).catch(error => {
      throw(error);
    });
  }
}

export function loginUserSuccess(creds) {
  sessionStorage.setItem('credentials', JSON.stringify(creds.data))
  history.push('/packages')
  return {
    type: types.LOGIN_USER_SUCCESS,
    state: creds.data
  }
}

包容器.jsx

import React, { Component } from 'react'
import {connect} from 'react-redux'
import PropTypes from 'prop-types'
import {loadPackages} from '../../actions/packageActions'
import PackageList from './PackageList'
import ImmutablePropTypes from 'react-immutable-proptypes'
import {Map,fromJS,List} from 'immutable'
import {withRouter} from 'react-router-dom'

class PackageContainer extends Component {
  constructor(props, context) {
    super(props, context);
  }
  componentDidMount() {
    this.props.dispatch(loadPackages());
  }
  render() {
    return (
      <div className="col-lg-12">
        {this.props.results ?
        <PackageList results={this.props.results} /> :
        <h3>No Packages Available</h3>}
      </div>
    );
  }
}

PackageContainer.propTypes = {
  results: ImmutablePropTypes.list.isRequired,
};

const mapStateToProps = (state, ownProps) => {
  return {
    results: !state.getIn(['packages','packages','results']) ? List() : state.getIn(['packages','packages','results'])
  };
}

PackageContainer = withRouter(connect(mapStateToProps)(PackageContainer))

export default PackageContainer

丹尼斯·科苏尔

我假设，您正在创建history对象的新实例但BrowserRouter不知道其中发生的更改的问题。

因此，您应该创建历史对象并将其导出到index.jsx和使用Router而不是BrowserRouter作为history属性传递，这样您就可以在需要时导入它。

例如：

索引.jsx

import { Router } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
...

export const history = createHistory()

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>,
  document.getElementById('app')
);

然后，loginActions您只需像以前一样导入history和使用.push方法。

登录操作.jsx

import * as types from './actionTypes'
import LoginApi from '../api/loginApi'
import { history } from './index'

export function loginUser(user) {
  return function(dispatch) {
    return LoginApi.login(user).then(creds => {
      dispatch(loginUserSuccess(creds));
    }).catch(error => {
      throw(error);
    });
  }
}

export function loginUserSuccess(creds) {
  sessionStorage.setItem('credentials', JSON.stringify(creds.data))
  history.push('/packages')
  return {
    type: types.LOGIN_USER_SUCCESS,
    state: creds.data
  }
}

希望它会有所帮助。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。