Javascript 仅反应路由器路由从配置渲染第一个路由

我根据官方文档为react router dom创建了一个路由配置

但是当我试图实现我的代码时，它只呈现配置中的第一条路由

routes.js

import TellerLoginPage from '../TellerLoginPage';
import TellerMenuPage from '../TellerMenuPage';

export const routeConfig = [
  {
    path: '/teller/login',
    exact: true,
    component: TellerLoginPage,
  },
  {
    path: '/teller',
    exact: true,
    component: TellerMenuPage,
  },
];

import React from 'react';
import { Route } from 'react-router-dom';

const RouteItem = ({ route }) => {
  console.log(route);
  return (
    <Route
      path={route.path}
      exact={route.exact}
      render={(props) => <route.component {...props} />}
    />
  );
};

export default RouteItem;

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   const populateRoute = () => {
     const jsx = [];

     routeConfig.forEach((r, i) => {
       jsx.push(<RouteItem route={r} key={i} />);
     });

     return jsx;
   };

   return (
     <Router>
     // ...
       <Switch>
         {populateRoute()}
        </Switch>
      // ...
     </Router>
   )
}

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   return (
     <Router>
     // ...
       <Switch>
         {routeConfig.map((r, i) => {
            return <Route path={r.path} render={(props) => <r.component {...props} key={i} />} />;
         })}
        </Switch>
      // ...
     </Router>
   )
}

我创建了一个组件，将实现道具的逻辑从

react router dom

封装到

Route

组件中

RouteItem.js

import TellerLoginPage from '../TellerLoginPage';
import TellerMenuPage from '../TellerMenuPage';

export const routeConfig = [
  {
    path: '/teller/login',
    exact: true,
    component: TellerLoginPage,
  },
  {
    path: '/teller',
    exact: true,
    component: TellerMenuPage,
  },
];

import React from 'react';
import { Route } from 'react-router-dom';

const RouteItem = ({ route }) => {
  console.log(route);
  return (
    <Route
      path={route.path}
      exact={route.exact}
      render={(props) => <route.component {...props} />}
    />
  );
};

export default RouteItem;

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   const populateRoute = () => {
     const jsx = [];

     routeConfig.forEach((r, i) => {
       jsx.push(<RouteItem route={r} key={i} />);
     });

     return jsx;
   };

   return (
     <Router>
     // ...
       <Switch>
         {populateRoute()}
        </Switch>
      // ...
     </Router>
   )
}

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import RouteItem from '../../components/RouteItem';

import { routeConfig } from './routes';

function App() {
   return (
     <Router>
     // ...
       <Switch>
         {routeConfig.map((r, i) => {
            return <Route path={r.path} render={(props) => <r.component {...props} key={i} />} />;
         })}
        </Switch>
      // ...
     </Router>
   )
}

有什么我错过了的吗？哈哈，我现在觉得自己像@patrick evans一样愚蠢

…您直接在

开关中渲染自己的组件
RouteItem
，而不是直接在
Route
中渲染<代码>开关

可能在内部尝试使用类似于

子级

道具的东西来访问每个路由

同时，他们使用扩展语法（

）代替pass

route

，作为

route

prop:

）

。因此，

Switch

可以访问示例中的路由道具，但不能访问代码中的路由道具

---

你只要把

）

修改成

）

就行了。当然，将您自己的组件更改为

constrouteItem=（route）=>{…

您是否检查了您的jsx，如果它生成正确的jsx语法？您说“它只呈现我的第一条路由”是什么意思？您使用的路径是什么？有两条不同的路径带有

exact

标志，因此在本例中只有一条路径是正确的rendered@Mateen我确实检查了它，它在CLI上没有产生错误。而且由于直接渲染可以工作，我相信我的jsx输出是正确的。这可能是因为您正在渲染自己的组件

RouteItem

dir直接在

开关中，而不是直接在
路由中。开关可能在内部尝试使用
子级
属性来访问每个路由，但看到的是您的组件，因此无法正确设置路由。此行错误==>exact={Route.exact}兄弟，你是个英雄。但是使用spread和直接给它一些道具，比如
route={r}有什么区别呢
不同之处在于
Switch
可以访问子道具来定义它应该呈现的路由。在您的情况下，它应该像这样访问
child.props.route.path
，但是由于
Switch
假设子道具类似于
route
组件，它只执行类似
child.props.pa的操作哦，我明白了，我所做的是我忽略了孩子们需要的道具。非常感谢你，伙计！