如何使用函数为Reaction-Router制作地图？ [英] How to make map for React-Router using Function?

问题描述

我试着为有保护功能的组件做一些定制的布线，但布线不起作用：

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>;
}

没有显示任何错误，将其show first对象从数组中放入，而不在其他对象上循环。 如果我将Routing放入map，则它是功，但如果我放入函数，则不是功。

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

推荐答案

试试这个，很管用。

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>
);

这篇关于如何使用函数为Reaction-Router制作地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！