CODEWITHSUNDEEP
javascriptreactjsreact-routerreact-router-domreactstrap
TomaszB94
TomaszB94

Reputation: 31

History not accessible from react-router-modal

Hello I'm having a problem with setting 'react-router-modal' parentPath for the last used component

ModalRoute and ModalContainer are a part of 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);

For Example i'm on mainScreen then i move to the SearchScreen then i open modal from navbar. I need my modal to go back to the SearchScreen

Upvotes: 1

Views: 344

Answers (1)

James Delaney
James Delaney

Reputation: 1776

I found couple of solutions which may help you.

You can try with this:

  1. Create state prevPath

  2. Add componentWillReceiveProps

  3. Provide prevPath state to the parentPath with condition if prevPath is empty redirect me on route '/'

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

This is one of the solutions we can try later another one if this doesn't help.

Upvotes: 1

Related Questions