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

Question

我的目标是渲染

我的预期结果是当我访问JSX.element返回值localhost:3000/dashboard时

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;

编辑：

当前的解决方案是放弃react钩子，直接转到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}中的组件发生变化时，应用程序将重新呈现。相反，如果您使用

我希望实现这一目标。




Answer 1

在仔细研究了一下之后，我在您的第一个代码示例中发现了潜在的问题。

基本上，React路由器要求在路由器组件的子组件中设置路由路径和精确的道具。

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

如果将路径和精确道具移动到仪表板路由和登录路由组件，则react路由器无法匹配这些路由。

参见代码沙盒