為什么不能從 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組件，則反應路由器無法匹配這些路由。

查看代碼和框