时间戳

首页 > 解决方案 > React Router Route 仅从配置中渲染第一条路由

javascript - React Router Route 仅从配置中渲染第一条路由

问题描述

我创建了一个路由配置，用于在此处react-router-dom遵循官方文档

但是当我尝试实现我的代码时，它只会从配置中呈现我的第一条路线。

路由.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,
  },
];

我创建了一个组件来将实现 props 的逻辑包装到Route组件中react-router-dom。

RouteItem.js

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;

应用程序.js

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

发生的事情是唯一正确渲染的路由是routes.js数组中第一个提到的路由。但是当我尝试直接在 中渲染它时App.js，路线被正确渲染了。

直接渲染 - App.js

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

有什么我想念的吗哈哈我在这一点上感觉很愚蠢

标签： javascriptreactjsreact-router-dom

解决方案

正如评论中提到的@patrick-evans

RouteItem...您直接在Switch而不是直接渲染自己的组件Route。Switch可能在内部尝试使用类似children道具的东西来访问每条路线......

在官方示例中，他们使用扩展语法 ( <RouteWithSubRoutes key={i} {...route} />) 而不是 pass routeas routeprop: <RouteItem route={r} key={i} />)。因此Switch可以在示例中访问路由道具，但不能在您的代码中访问。

你应该修复<RouteItem route={r} key={i} />)它<RouteItem {...r} key={i} />)，它应该可以工作。当然，将您自己的组件更改为const RouteItem = (route) => {...

推荐阅读