TWIL
React
Marisa's presentation of a React application demonstrating Routing with PopoutForms, with highlights on code showcasing component management and URL dynamics.

Welcome back to TWIL, our weekly series that serves as a platform for the Cuttlesoft team to share intriguing insights from the world of software development. In this week's post, Marisa navigates the complexities of Routing with PopoutForms in a React application, demonstrating how to manage component visibility and URL parameters for a seamless user interface. Dive into the world of Javascript and React as Marisa presents a case study from a recent application, illustrating how to dynamically handle data pull with unique URLs and enhance user navigation through browser history manipulation.

Routing with PopoutForms

Background

Similar to Modals, we use PopoutForms to display components on top of a mounted container. Visibility of a PopoutForm is controlled by props showForm and setShowForm state controlled by the parent container.

Use Case

For an application I was working on - we wanted to display a PopoutForm that had it's own URL with parameters for entityType and uid. Allowing us to dynamically pull data without having to pass in these as props, and allowing the user to use basic back capabilities (pressing back button in the browser). We also needed to be able to display a show profile, with nested Artist/Venue profiles and navigate to these as well.

Solution

Wrap our ArtistVenueShow component in a PopoutForm with props:

<PopoutForm
  showForm
  setShowForm={() => history.goBack()}
>

Update our routes to dynamically set location in our Switch based on background. Add a route for the ArtistVenueShow component that is added based on background. Set the Dashboard route to be exact otherwise the profile will never be displayed.

export default function Routes() {
  const location = useLocation()
  const background = location.state && location.state.background

  return (
    <>
      ...
      <Container>
        <Switch location={background || location}>
          ...
	  <PrivateRoute exact path="/dashboard" component={Dashboard} />
          ...
        </Switch>

        {background && (
          <PrivateRoute
            path="/dashboard/:entityType/:uid"
            component={ArtistVenueShow}
            key={Date.now()}
          />
        )}
      </Container>
      ...
    </>
  )
}

When navigating from the Dashboard to a profile, set the background as the current location (/dashboard). This will result in the Dashboard container still being mounted and displayed behind the profile.

history.push({
  pathname: `/dashboard/shows/${show.uid}`,
  state: { background: location },
})

For a more advanced post on the topic of routing with popouts in React, check out Marisa's blog post: Dynamic Layers with React and React-Router.

  • Javascript
  • React
Marisa Gomez's profile picture
Marisa Gomez

Senior Software Engineer

Related Posts

August 18, 2024 • Frank Valcarcel

What makes Enterprise Software Development Different?

Enterprise software powers large organizations, handling complex tasks across departments. From robust security to scalability, these solutions face unique challenges. Explore what makes software “enterprise-ready” and how to choose the right development approach for your business.

Ruby programming concepts illustrated with a golden logic gate diagram.
September 25, 2023 • Katie Linero

Shorthand Ruby Operators for Assignment Conditionals

Explore the nuances of assignment in Ruby, diving deep into conditional expressions and self-assignment shorthands. Uncover the power and elegance of =, ||=, and &&= in various coding scenarios. Master the art of efficient Ruby coding with practical examples and insights from the Rubocop style guide.