Auxiliary Routing with React?

Published in

ITNEXT

3 min readDec 21, 2018

What is Auxiliary route? Angular router supports rendering of multiple in-dependable routes. The most common use cases are rendering of popup, modal or sidebar along a main route . You can read more about Angular Auxiliary routing at https://angular.io/guide/router#displaying-multiple-routes-in-named-outlets

Requirements

In this blog we will go over a use case with a modal dialog opened and closed by router. We will use React and react-router package to implement this application.

Let’s look at our requirements. We need to:

Able to open a page to see the list of fruits

2. Able to click on a fruit link and open a modal dialog with details about this fruit. The URL should be updated to include the selected fruit.

3. The user can save the application URL with open modal. When the user opens the application with this URL, modal should be displayed along with list of fruits.

Render Fruit List

The application uses react-router BrowserRouter and configure Route and Redirect components.

class App extends Component {
  render() {
    return (
      <BrowserRouter>
          <Switch>
            <Route path="/fruits" 
               render={props => <Fruits {...props}/>}></Route>
            <Redirect exact path="/" to="/fruits"/>
          </Switch>
      </BrowserRouter>
    );
  }
}

Redirect component is used to redirect user to /fruits path from “/” path. Route /fruits will render list of fruits. Switch is used to render either Route or Redirect component.

Here is the Fruits component with list of fruits:

const Fruits = (props) => {
  return (
    <>
    <h3>Fruits</h3>
    <ul>
      <li>apple details</Link></li>
      <li>orange details</Link></li>
      <li>banana details</Link></li>
    </ul>
    </>
  );
};

Modal Fruit Detail

To display fruit details modal I will use W3.CSS Modal. You can find the CSS style at https://www.w3schools.com/w3css/w3css_modal.asp for the modal.

Here is the fruit modal:

const Fruit = (props) => {
  return (
    <div className="w3-modal" style={{display: 'block'}}>
      <div className="w3-modal-content">
        <div className="w3-container">
          <p>Details for fruit: {props.name}</p>
          <p>Some text. Some text. Some text.</p>
        </div>
      </div>
    </div>
  );
};

Add Routes

So far we created a component that renders a list of fruits and a modal component for a specific fruit. Now let’s add routing to satisfy our requirements.

Link To Modal

As I mentioned in the beginning, the Angular’ auxiliary notation will be used to represent the main route (fruit list) and secondary route (modal with fruit details) in one URL.

The URL will look like — http://localhost:3000/fruits/(fruit/apple) and here is how our links will look like:

<Link to="/fruits/(fruit/apple)">Open apple details</Link>

Route To Modal

We need to add a route to render a modal in the page. We can add it to the Fruits component like that:

const Fruits = (props) => {
  const basePath = props.match.path;
  return (
    <>
    <Route path="fruits/\\(fruit/:name\\)"
      render={props => 
         <Fruit name={props.match.params.name}{...props}/>}
     />

    <h3>Fruits</h3>
    <ul>
          ....
    </ul>
    </>
  );
};

As you can see the modal and the list will be rendered together with http://localhost:3000/fruits/(fruit/apple) URL:

and only the list when URL is http://localhost:3000/fruits

Close Modal

To close the modal we just need to remove the secondary route (/fruit/banana) from the URL. A close button’s function will push a new route /fruits.

const Fruit = (props) => {
  const handleClose = () => {
    props.history.push('/fruits');
  };

  return (
    <div className="w3-modal" style={{display: 'block'}}>
      <div className="w3-modal-content">
        <div className="w3-container" style={{padding: 30}}>
....
          <button onClick={handleClose}>Close</button>
        </div>
      </div>
    </div>
  );
};

Now everything is working as required and we can replace /fruits string with props.match.path.

You check the working example at: