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

Question

您好，我在为最后使用的组件设置“react-router-modal”父路径时遇到问题

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

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

Answer 1

我找到了一些可能对您有所帮助的解决方案。

你可以试试这个：

1. 创建状态prevPath

2. 添加组件WillReceiveProps

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}
     />
   

如果没有帮助，我们可以稍后再尝试另一种解决方案。