Why is react-router-dom custom route not working?

Question

I am trying to build an application which involves both the private and public routing, so I am using the custom private and public routes, but the thing is when I'm trying to send the component, it is not being rendered and I cannot figure it out what is wrong.

Here's the link to the sandbox, the entry point i.e the routes link which are handling the public and private routes.

Note: The Custom functional routes are working but not my routes, even if I try passing some custom routes which like h1 or something it works. But not the ones I've built.

Answer 1

You have to use "exact" from Route attribute. Because <Switch> check and render the first child Route that matches the location. In this case is "/", and all of your routes contains "/"

 <PrivateRoute exact path={route.path} component={route.component} />

And then you must to render the component in the property component inside your array of routes.

This is your final object of private routes:

 const routes = [
    {
      path: '/',
      component: <h1>path component</h1>,
    },
    {
      path: '/write',
      component: <UserInfo/>,
    },
    {
      path: '/profile',
      component:<Profile/>,
    },
    {
      path: '/polls',
      component: <ListPolls/>,
    },
    {
      path: '/details',
      component: <UserInfo/>,
    }
]

Because you are using "render" attribute of Route.

If you want send the component without , you should use "component" attribute of Route, but you can only use components, not render HTML code.