CODEWITHSUNDEEP
javascriptreactjsreduxreact-router
maxedison
maxedison

Reputation: 17553

React Router route configuration that supports displaying a modal over any route

Consider the following React Router setup:

<Router history={history}>
    <Route path="/" component={Root}>
        <Route path="/users" component={UserList}/>
        <Route path="/users/new" component={UserCreate}/>
        <Route path="/users/:id" component={User}/>

        <Route path="/tags" component={TagList}/>
        <Route path="/tags/new" component={TagCreate}/>
        <Route path="/tags/:id" component={Tag}/>
    </Route>
</Router>

At any point, I want to be able to display a specific modal. Right now, I am managing this with a modal property in my Redux store. The Root component (<Route path="/" component={Root}>) checks for this property and renders the necessary modal if it is set.

Can this be achieved via React Router? So rather than having to keep a modal property in my redux store, I can just navigate to something like /users#modal or /users/modal and get both the UserList component rendered (as defined in <Route path="/users" component={UserList}/>) and the modal component

Upvotes: 2

Views: 95

Answers (1)

flexicious.com
flexicious.com

Reputation: 1671

One of the ways you can do this would be to check for your location hash in your componentDidMount of your individual components. 

    componentDidMount() {
        if (window.location.hash) {
           const hash = window.location.hash.substring(1);
           if (hash === "modal") {
             //show your modal here.
           }
        }
    }

You could have all your components inherit from a common base class if they all need to behave this way.

Upvotes: 1

Related Questions