无法从react-router-modal访问历史记录

Question

您好我在为上次使用的组件设置'react-router-modal'parentPath时遇到问题

ModalRoute和ModalContainer是react-router-modal的一部分

App.js

class App extends Component {
  render() {
    return (
      <main>
        <Navbar />
        <BrowserRouter>
          <div>
            <Switch>
              <Route path="/main" component={ContentDefault} />
              <Route path="/search" component={SearchScreen} />
              <ModalRoute
                path="/register"
                parentPath="/"
                component={RegisterScreen}
              />
              <Route path="/contact" component={ContentDefault} />
              <Route component={ContentDefault} />
            </Switch>
            <ModalContainer />
          </div>
        </BrowserRouter>
        <Footer />
      </main>
    );
  }
}

export default App;

SearchScreen.jsx

import React, { Component } from "react";
import { withRouter } from "react-router-dom";

class SearchScreen extends Component {
  render() {
    return (
      <main>
        <h1>SearchScreen</h1>
      </main>
    );
  }
}

export default withRouter(SearchScreen);

例如，我在主屏幕上，然后我移动到SearchScreen然后我从导航栏打开模态。我需要我的模态回到SearchScreen

Answer 1

我找到了几个可以帮助你的解决方案。

你可以尝试这个：

1. 创建状态prevPath
2. 添加componentWillReceiveProps
3. 如果prevPath为空，则为parentPath提供prevPath状态，并在路由'/'上重定向我

   class App extends Component {
     state = { 
       prevPath: ''
      }
   
    componentWillReceiveProps(nextProps) {
      if (nextProps.location !== this.props.location) {
        this.setState({ prevPath: this.props.location })
      }
     }
   
    <ModalRoute
      path="/register"
      parentPath={this.state.prevPath || '/'}
      component={RegisterScreen}
     />

这是我们可以在以后另一个尝试的解决方案之一，如果这没有帮助。