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

Question

I want to ask whether it is possible to render same react component for different routes but with different value props:

I have something like this:

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

As you can see I have three different routes with the same component but the buttonStyle is different for each route. Is there a way how to simplify this or some better apporach how to handle this ? For example with one Route component ? Thank you.

Answer 1

I doubt that you can do this with one <Route /> component since a Route can have only one path.

However, you could make it a bit cleaner by creating an array of routes.

It could look something like this:

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

That would depend on where you want to keep the logic. If you want to make the route simple you could have a single route component with something/:btn , and then in the <SomeComponent /> have the button rendering logic. You could have the /:btn be the colored hash you want the button to be in, or some arbitary id number only your app could decipher.

An example would be

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

}

This is not because it is the best solution, but maybe this idea will kickstart how to want to do it. Good luck