history.push()和<重定向/>不工作

Question

我尝试了大约5-7种不同的解决方案，关于重定向和历史不工作的反应路由器。这是创建-反应-应用程序代码：

index.js

import { Router} from 'react-router-dom';
import history from './History';
ReactDOM.render(<Router history={history}><App /></Router>, document.getElementById('root'));

History.jsx

import {createBrowserHistory} from 'history';
export default createBrowserHistory();

SplashScreen.jsx

return (
  <ViewContext.Provider value={this.state.contextChangeUtils}>
    <WrappedComponent/>
  </ViewContext.Provider>
);

App.jsx

static propTypes = {
  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
}
//...
const routes = [{
  path: '/',
  component: MainPage,
}, {
  path: '/status-history',
  component: HistoryPage,
}, {
  path: '/status-details',
  component: DetailsPage
}]

if (this.context.viewInfo.path!==this.state.lastPath) {
  this.setState({lastPath: this.context.viewInfo.path});
  let { history } = this.props;
  history.push(this.context.viewInfo.path);
}

return (
  <Container className="App pl-0 pr-0">
    <StatusHeader />
    <Row>
      <Col md="1" />
      <Col md="2" className="TagListOuter">
        <TagList tags={tags} />
      </Col>
      <Switch>
        {routes.map(r => (
          <Route path={r.path} key={r.path} component={r.component} />
        ))}
      </Switch>
    </Row>
  </Container>
);

App.contextType = ViewContext;

export default SplashScreen(withRouter(App));

• 我尝试在每个路由的
• 组件中使用this.props.history.push()，我尝试在我的应用程序(甚至index.js)

的所有级别使用一个简单的

有什么可能会出错的想法吗？提前感谢

Answer 1

this.props.history.push({
        pathname: "Your  path",
        state: {
          lastPath: this.context.viewInfo.path
        }
});

您可以使用this.props.location.state或this.props.location.state.lastPath获取数据。

Answer 2

如果您创建了一个自定义历史实例来管理您的响应路由器历史记录和调用函数，那么请按下面的方式使用它，而不是导入withRouter并将其注入组件。

import history from "../History.js"

static propTypes = {
  match: PropTypes.object.isRequired,
  location: PropTypes.object.isRequired,
  history: PropTypes.object.isRequired,
}
//...
const routes = [{
  path: '/',
  component: MainPage,
}, {
  path: '/status-history',
  component: HistoryPage,
}, {
  path: '/status-details',
  component: DetailsPage
}]

if (this.context.viewInfo.path!==this.state.lastPath) {
  this.setState({lastPath: this.context.viewInfo.path});

  history.push(this.context.viewInfo.path);
}

return (
  <Container className="App pl-0 pr-0">
    <StatusHeader />
    <Row>
      <Col md="1" />
      <Col md="2" className="TagListOuter">
        <TagList tags={tags} />
      </Col>
      <Switch>
        {routes.map(r => (
          <Route path={r.path} key={r.path} component={r.component} />
        ))}
      </Switch>
    </Row>
  </Container>
);

App.contextType = ViewContext;

export default SplashScreen(App);