Routing Part-2

In this article, we will continue discussing about Routing. This is Continuation to our previous article.

In the Code we have developed during our Previous article. We have created multiple components, placed multiple link components using which we have specified the Navigation URL’s and we have added multiple Route Components who will display the contents of a Component based on the URL Match.

If we look at the output, we can observe that by default we don’t get contents of any Component. We wanted Employee Component Contents should be displayed by default and the rest of the Navigation should remain same.

We will change the Navigation URL of the Link Component of Employees to /.

Save the Changes, navigate to the browser. We can see that we get the Employees Data by default.

But it has a Problem, lets click on departments link. We see that both Employees Data and Department data are being displayed.

That is because the Path of departments is /department. It has forward slash in it. So it is matching two routes.

The same thing happens if we click on Projects Link as well.

But that should not happen.

We can avoid that by adding "exact paths" to routes.

Save the changes, navigate to the browser. We can see that we get the Employees Data by default.

lets click on departments link. We see only Department data. Same with the Case of Projects link as well.

When we click on a link, based on the Navigation URL, React Router tries to identify the Route which is having the matching Path.

As we see here, if it is Departments, we get Department Component contents, if it is Project, we get Project Component Contents.

We have another Problem to address.

Though Router finds a matching Route, it continues to search all the remaining routes as well to find the matching Route.

That means if we have 100 routes added, search will happen on all 100 routes irrespective of the match is found or not.

To understand it better, lets add another route which will be pointing to a Employee Component but lets keep the Path as departments.

Save the changes, navigate to the browser. Click on Departments, we will get the contents of two components.

Though the second matches the path, still the search is continued further and returning the Contents of other Component as well.

But ideally we don’t want that to happen. If the matching path is found, we want to render that Route Component Contents and ignore the rest.

To make that to happen, we use another component called as switch. It works similar to switch case.

Lets place all our route elements with in the boundaries of switch component.

When a <Switch> is rendered, it searches through its children <Route> elements to find one whose path matches the current URL. When it finds one, it renders that <Route> and ignores all others.

Save the changes, navigate to the browser. Click on Departments, we will get the contents of only Department components.

I hope we are very clear on What is Link, Switch and Route Components. We will continue this discussion in our next article.

function App(){
  return(
    <div>
      <h2>Welcome to App Component...</h2>
      <ul>
        <li><Link to="/">Employees</Link></li>
        <li><Link to="/departments">Departments</Link></li>
        <li><Link to="/projects">Projects</Link></li>
      </ul>
      <Switch>
        <Route exact path="/" component={Employee}></Route>
        <Route path="/departments" component={Department}></Route>
        <Route path="/projects" component={Project}></Route>
        <Route path="/departments" component={Employee}></Route>
      </Switch>
      
    </div>
  )
}

ReactDOM.render(<BrowserRouter><App></App></BrowserRouter>,document.getElementById("root"));

Routing Part-2

Video Reference: