ReactJS dynamic routes

Question

I've been using CoreUI to learn React more in depth. In a folder called "containers" there's this piece of code that seems to iterate through a file containing all the routes.

<main className="main">
            <AppBreadcrumb appRoutes={routes}/>
            <Container fluid>
              <Switch>
              {routes.map((route, idx) => {
                  return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                      <route.component {...props} />
                    )} />)
                    : (null);
                },
              )}
                <Redirect from="/" to="/dashboard" />
              </Switch>
            </Container>
          </main>

And here's a brief example of the routes.js file:

    const routes = [
  { path: '/', exact: true, name: 'Home', component: DefaultLayout },
  { path: '/dashboard', name: 'Dashboard', component: Dashboard },
  { path: '/theme', exact: true, name: 'Theme', component: Colors },

From my understaning, the code is trying to check the path and only render the component depending on the browser's path, is this correct? Could you decode the above code in a normal IF-Else paradigm?

Answer 1

Could you decode the above code in a normal IF-Else paradigm?

To answer your question you must understand what the ternary or conditional operator is. In short, it replaces an if/else statement by validating one condition (before the interrogation mark), if true it will do whatever is next to the interrogation mark, if false it will do whatever is next to the colon. So:

condition ? do if true : do if false.

Check here for a more precise definition.

Normal version

return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
                  <route.component {...props} />
                )} />)
                : (null);

if/else version

if (route.component){
    return (
        <Route key={idx} 
            path={route.path} 
            exact={route.exact} 
            name={route.name} 
            render={props => (<route.component {...props} />)} 
        />);
} else {
    return null;
}

So, for your question:

From my understaning, the code is trying to check the path and only render the component depending on the browser's path

It is rendering a Route component only if the component is set in the object inside the array called routes . If the property is not set in the object it will not render anything (in React you can do this by returning null).

The Route component will handle the render of a component depending on the browser's path and comparing it to the path property of the item in routes , either '/', '/dashboard' or '/themes' in your example.