What exactly is used for in React Router?

I am new to React learning , and was trying to build an app using react-router-dom. I was able to implement basic routing when I came across the term ‘switch’. Can anyone please explain me with a use-case example where we use switch and what is its use?

Answer

Since you are new am going to take a bit more time to explain with examples and also add some few things about it you may want to have handy.

So like Iddler said, Switch is more or less like the “Switch case” condition in any other languages but usually ends with the first match it finds.

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component="{About} />
</Switch>

That is an example of its most basic use. Switch determines the start and end of the block or condition. Each Route checks for the current path. supposing we were working on “www.test.com”. All of “www.test.com” is the root “/”. So the Route checks for the path after the root. so if you had “www.test.com/home”, “/home” comes after the root so the “Home” component will be loaded in our example above and if you had “www.test.com/about” the “About” component is loaded.

Be mindful that you can use any names. the components and paths do not need to be the same.

There are also cases when you might want to use exact to match an exact path. this is useful when you have similar paths. eg “/shop” and “/shop/shoes”. using exact ensures Switch matches exact paths and not just the first.

Eg:

<Switch>
    <Route exact path="/shop" component={Shop} />
    <Route exact path="shop/shoes" component="{Shoes} />
</Switch>

You can also use <Route... /> without the <Switch>.

Eg:

<Route path="/home" component={Home} />

so unlike direct component loads where you just load a component like <Home /> Routers work with the URLs.

Lastly, the <Route... /> path can take arrays of url to load same component.

Eg:

<Switch>
    <Route path={[ "/home", "/dashboard", "/house", /start" ]} component={Home} />
    <Route exact path={[ "/about", "/about/management", "/about/branches" ]} component="{About} />
</Switch>

I hope this helps. Let me know if you need clarifications of any sort. 🙂

UPDATE:

You are not required to write Routers in this same format always. below is another format you could use;

<Router>
    <Switch>
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
    </Switch>
</Router>

There are instances like am in now where you want to be able to handle what shows when a wrong URL is entered. like a 404page. you could use Router without a path. so like a regular switch statement, that becomes your default.

<Switch>
    <Route path="/home" component={Home} />
    <Route path="/about" component="{About} />
    <Route component="{PageNotFound} />
</Switch>

Advertisement

Answer