如何为具有不同价值道具的不同路线呈现相同的反应组件？

Question

我想问一下是否可以为不同的路由渲染相同的反应组件但具有不同的价值道具：

我有这样的东西：

   <Switch>
      <Route
         exact
         path="/something1"
         render={props => (
            <SomeComponent
             {...props}
             buttonStyle="#65BDE0"
          />
       )}
    />
    <Route
       exact
       path="/something2"
       render={props => (
          <SomeComponent
           {...props}
           buttonStyle="#FFFFFF"
          />
       )}
    />
     <Route
       exact
       path="/something3"
       render={props => (
          <SomeComponent
           {...props}
           buttonStyle="#000000"
          />
       )}
    />
    </Switch>

如您所见，我有三个不同的路由，它们具有相同的组件，但每条路由的 buttonStyle 都不同。有没有办法简化这个或一些更好的方法来处理这个？例如，使用一个 Route 组件？谢谢。

Answer 1

我怀疑你能否用一个 <Route /> 组件来做到这一点，因为一条路线只能有一条路径。

但是，您可以通过创建一个路由数组使其更简洁一些。

它可能看起来像这样：

const routesWithProps = [
  {
    path: '/something1',
    props: {
      buttonStyle: '#65BDE0'
    }
  },
  {
    path: '/something2',
    props: {
      buttonStyle: '#FFFFFF'
    }
  },
  {
    path: '/something3',
    props: {
      buttonStyle: '#000000'
    }
  },
];

<Switch>
  {
    routesWithProps.map(route => (
      <Route
         exact
         path={route.path}
         key={route.path}
         render={props => <SomeComponent {...props} {...route.props} />} 
      />
    ))
  }
</Switch>

Answer 2

这取决于您希望将逻辑保留在何处。如果你想让路由变得简单，你可以有一个带有 something/:btn 的路由组件，然后在 <SomeComponent /> 中有按钮渲染逻辑。您可以让 /:btn 成为您希望按钮所在的彩色散列，或者一些只有您的应用可以破译的任意 ID 号。

一个例子是

export const SomeComponent = ({history}) => {
  const param = history.params.btn;
  if(param === 1) {
    return <div>Here i can add specific things </div>
  }
  // and so on

}

这并不是因为它是最好的解决方案，但也许这个想法会启动如何去做。祝你好运

如何为具有不同价值道具的不同路线呈现相同的反应组件？

How to render same react component for different routes with different value props?

javascript

reactjs