javascript - 无法从 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);

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

Answer 1

我找到了几个可能对您有帮助的解决方案。

你可以试试这个:

1. 创建状态prevPath

2. 添加componentWillReceiveProps

3. 如果 prevPath 为空，则将 prevPath 状态提供给 parentPath 并在路由 '/' 上重定向我

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

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