How to make map for React-Router using Function?

Question

I try to make some customized routes for components with protected function but route is not working:

import React from "react";
import "./styles.css";
import { BrowserRouter, Switch, Route, useHistory } from "react-router-dom";

const RoutesRender = ({ Routes }) => {
    const History = useHistory();

    if (Routes.AuthRequired) {
        History.push("/login");
        return null;
    } else {
        return (
            <Route exact path={Routes.Path} render={(props) => <Routes.Component {...props} />} />
        );
    }
};

const RoutesProvider = () => {
    return (
        <React.Fragment>
            <BrowserRouter>
                <Switch>
                    {[
                        {
                            Path: "/login",
                            Component: () => <div>"login"</div>,
                            Title: "Login",
                            AuthRequired: false
                        },{
                            Path: "/register",
                            Component: () => <div>"register"</div>,
                            Title: "Register",
                            AuthRequired: false
                        },{
                            Path: "/",
                            Component: () => <div>"root"</div>,
                            Title: "Janus Chat",
                            AuthRequired: true
                        }
                    ].map((Routes, Index) => (
                        <RoutesRender Routes={Routes} key={Index} />
                    ))}
                </Switch>
            </BrowserRouter>
        </React.Fragment>
    );
};

export default function App() {
    return <div className="App">{RoutesProvider()}</div>;
}

It's not show any error put it's show first object from array and not looping on others. if i put Route inside map it's work but if i put in function not work.

{RoutesMaster.map((Routes, Index) => (
    <Route exact key={Index} path={Routes.Path} render={(props) => <Routes.Component {...props} />}/> 
))}

Mahdi Sheibak · Accepted Answer · 2020-12-18 13:37:47Z

Try this, it works.

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

const mapRouter = [
  {
    path: "/login",
    component: () => <div>"login"</div>,
    title: "Login",
    isPrivate: false,
  },
  {
    path: "/register",
    component: () => <div>"register"</div>,
    title: "Register",
    isPrivate: false,
  },
  {
    path: "/",
    component: () => <div>"root"</div>,
    title: "Janus Chat",
    isPrivate: true,
  },
];

const PrivateRoute = (props) => {
  const userId = false; // This determines whether the user is logged in or not.

  return userId ? (
    <Route path={props.path} exact={props.exact} render={props.component} />
  ) : (
    <Redirect to="/login" />
  );
};

const Router = () => (
  <BrowserRouter>
    <Switch>
      {mapRouter.map(({ component, exact, path, isPrivate }, index) =>
        isPrivate ? (
          <PrivateRoute
            key={index}
            component={component}
            path={path}
            exact={exact}
          />
        ) : (
          <Route key={index} path={path} exact={exact} render={component} />
        )
      )}
    </Switch>
  </BrowserRouter>
);

Collectives™ on Stack Overflow

How to make map for React-Router using Function?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related