为什么不能从 2 个 JSX 元素渲染？

Question

我的目标是使用array.map方法渲染<Route /> 。 现在，我正在尝试使用 react 钩子传递返回值，但问题是localhost:3000/login return <div>Login</div>而localhost:3000/dashboard什么都不返回。

我的预期结果是当我访问localhost:3000/dashboard JSX.element 返回<div>Dashboard</div>

应用程序.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;

编辑：

目前的解决办法是放弃react hook，直接去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>
  );
}

但是，我的导师告诉我，如果你给出一个表达式而不是类，当{PublicRouteComponents}的组件发生变化时，应用程序将被重新渲染。 相反，如果您使用<PublicRouteComponents /> ，当类更改时，只会重新呈现<PublicRouteComponents /> 。

我希望实现这一目标。

Answer 1

在玩了一会儿之后，我在你的第一个代码示例中发现了潜在的问题。

基本上，React 路由器要求在Router组件的子组件中设置路由path和exact道具。

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

如果您将path和exact道具移动到DashboardRoute和LoginRoute组件，则反应路由器无法匹配这些路由。

查看代码和框