Why you can't render from 2 JSX element?

Question

My goal is to render <Route /> with array.map method. Right now, I am trying to pass the return value using react hook, but the problem is localhost:3000/login return <div>Login</div> while localhost:3000/dashboard return nothing.

My expected result is when I visit localhost:3000/dashboard the JSX.element return <div>Dashboard</div>

App.js

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const PublicRouteComponents = () => {
  return <Route exact path="/login" render={() => <div>Login</div>} />
};

const PrivateRouteComponents = () => {
  return <Route exact path="/dashboard" render={() => <div>Dashboard</div>} />
};

function App() {

  return (
    <Router>
      <Switch>
        {/* <Route exact path="/login" render={() => <div>Login</div>} />
        <Route exact path="/dashboard" render={() => <div>Dashboard</div>} /> */}

        <PublicRouteComponents />
        <PrivateRouteComponents />
      </Switch>
    </Router>
  );
}

export default App;

edit:

the current solution is to give up the react hook and went straight to JSX.element

function App() {
  const PublicRouteComponents = PublicRoutes.map(
    ({restricted, component, path}, key) => <PublicRoute restricted={restricted} component={component} exact path={path} key={key} />
  )

  const PrivateRouteComponents = PrivateRoutes.map(
    ({component, path}, key) => <PrivateRoute component={component} exact path={path} key={key} />
  )

  return (
    <Router>
      <Switch>
        {PublicRouteComponents}
        {PrivateRouteComponents}
      </Switch>
    </Router>
  );
}

But, my instructor told me, if you gave an expression instead of class, when the component inside {PublicRouteComponents} changes, the app will got re-rendered. Instead if you use <PublicRouteComponents /> , when the class change, only <PublicRouteComponents /> will be re-rendered.

I wish to achieve that.

Answer 1

After playing around a bit, I found the underlying issue in your first code sample.

Basically, React router demands that the route path and the exact props to be set in the children of the Router component.

import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const LoginRoute = () => {
  return <Route render={() => <div>Login</div>} />;
};

const DashboardRoute = () => {
  return <Route render={() => <div>Dashboard</div>} />;
};

export default function App() {
  return (
    <Router>
      <Switch>
        <DashboardRoute exact path="/dashboard" />
        <LoginRoute exact path="/login" />
      </Switch>
    </Router>
  );
}

If you move the path and exact props to the DashboardRoute and LoginRoute components, then react router is unable to match those routes.

See codesandbox