使用反应路由器，如何使用路由配置传递组件道具？

Question

我正在尝试使用单个路由器配置数组实现以下目标。 这里要注意的是，我有一个状态变量storeName ，我将它传递给CategoryPage组件。

import React, { useState } from 'react'
import { Switch, Route, BrowserRouter } from 'react-router-dom'
import { Navigation } from './Navigation'
import { HomePage } from './HomePage'
import { CategoryPage } from './CategoryPage'
import { ProductPage } from './ProductPage'
import { PageNotFoundPage } from './404Page'

export function App() {
    const [storeName, setStoreName] = useState('My Store')

    return (
        <div>
            <h1>{storeName}</h1>
            <BrowserRouter>
                <Switch>
                    <Route path="/category">
                        <CategoryPage storeName={storeName} />
                    </Route>
                    <Route path="/product">
                        <ProductPage />
                    </Route>
                    <Route path="/" exact>
                        <HomePage />
                    </Route>
                    <Route path="*">
                        <PageNotFoundPage />
                    </Route>
                </Switch>
            </BrowserRouter>
        </div>
    )
}

如果我要切换到像这样使用路由配置对象...

const routeConfig = [
    {
        path: '/',
        exact: true,
        component: HomePage,
    },
    {
        path: '/category',
        exact: false,
        component: CategoryPage,
    },
    // ...
]

// ...

<Switch>
    {routeConfig.map((route, i) => {
        return (
            <Route
                path={route.path}
                exact={route.exact}
                key={i}
            >
                <route.component />
            </Route>
        )
    })}
</Switch>

...记住每个组件可能需要不同的道具，传递道具的最合适方法是什么？

我想我可以尝试使路由配置项的component键成为一个函数，该函数接受每个道具，然后尝试将其映射到正在返回的组件。 我不确定这是否是正确的方法。

谢谢！

---

更新 #1

所以我尝试从路由配置数组中返回组件，如下所示：

const routeConfig = [
    {
        path: '/',
        exact: true,
        component: (props) => <HomePage {...props} />,
    },
    {
        path: '/category',
        exact: false,
        component: (props) => {
            return <CategoryPage {...props} />
        },
    },
]

// ...

const [storeName, setStoreName] = useState('My Store')

// ...

<Switch>
    {routeConfig.map((route, i) => {
        return (
            <Route
                path={route.path}
                exact={route.exact}
                key={i}
            >
                {route.component({ storeName })}
            </Route>
        )
    })}
</Switch>

这是有效的，但现在每个组件都会有每个道具。 就像在这种情况下，我的 HomePage 组件不需要storeName道具，但它仍然有它。 一旦我开始添加需要其他状态变量的其他组件，也许这会导致很多变量存储在内存中？ 似乎并不理想。

---

更新 #2

通过使用路由配置，我可能走错了方向。 似乎这实际上与反应路由器的哲学相反，因为我从这里理解它https://reacttraining.com/react-router/web/guides/philosophy 。 也许我会坚持我的第一个没有路由配置的实现，但是知道如何使用路由配置和传递正确的道具是可以实现的仍然很好。

Answer 1

在您的更新 #1 中，只需提取您想要的道具

const routeConfig = [
    {
        path: '/',
        exact: true,
        component: () => <HomePage />,
    },
    {
        path: '/category',
        exact: false,
        component: ({storeName}) => {
            return <CategoryPage storeName={storeName} />
        },
    },
]

---

或者您可以为每个组件使用相关道具列表并随时随地提取它们

function pickProps(availableProps = {}, selection = []) {
  return selection.reduce(
    (props, selectedProperty) => {
      props[selectedProperty] = availableProps[selectedProperty];
      return props;
    },
    {}
  );
}

// ...

const routeConfig = [{
    path: '/',
    exact: true,
    component: HomePage,
  },
  {
    path: '/category',
    exact: false,
    component: CategoryPage,
    props: ['storeName'],
  },
  // ...
]

// ...
const componentProps = {storeName}
//....
<Switch>
    {routeConfig.map((route, i) => {
        return (
            <Route
                path={route.path}
                exact={route.exact}
                key={i}
            >
                <route.component
                   {...pickProps(componentProps, route.props)}
                />
            </Route>
        )
    })}
</Switch>