1

In my current project I have a <Header /> component that I would only like to render when the user is viewing the pages at "/library" or "/admin". I find myself somewhat perplexed though because I am following the example set about in the docs, here but I am getting an error in the console when I do so.

My Route is written as follows:

<Route
  path={['/admin', '/library']}
  render={props => (
    <Header {...props} />
  )}
/>

This works, the <Header /> component will only render when it matches those paths but I'm still seeing the following error in the console:

Warning: Failed prop type: Invalid prop path of type array supplied to Route, expected string.

Given that I'm matching the example in the documentation, I'm surprised that I'm getting the above error. Is there something I'm not understanding correctly? This is the main part of what I find so perplexing and it makes me wonder whether I am doing something wrong, especially since in spite of the error message my code works as expected.

I am using React v16.6 and react-router-dom v4.3.1.

flyingace
  • 1,707
  • 17
  • 24
  • Possible duplicate of [Multiple path names for a same component in React Router](https://stackoverflow.com/questions/40541994/multiple-path-names-for-a-same-component-in-react-router) – Blue Dec 30 '18 at 02:05
  • 1
    @FrankerZ I do not think that this is a duplicate. The question that you are mentioning was written in a time when the path property of react-router did not accept an Array of strings... Now it does, and what the OP is asking is why are there warnings in the console while using a documented option. Those are (related, but) different questions. – Josep Dec 30 '18 at 02:39

2 Answers2

1

As you mentioned when you try your setup you see that it actually works. You are getting this warning because of the prop types. It is solved in the 4.4.0-beta.4 version I guess. This version also solves some other problems and the link I gave above actually mentions those problems.

So, try to upgrade to next:

yarn add react-router-dom@next react-router@next
devserkan
  • 16,870
  • 4
  • 31
  • 47
  • Thanks for your reply. I am a bit torn about how best to handle this as both solutions will require watching react-router-dom for updates. I don't want to be continually using beta versions of `react-router-dom` but at the same time I don't want to have to keep checking to see if it has made it out of beta and changing my `package.json` file then. Oh, my life is so hard! – flyingace Dec 30 '18 at 18:50
  • You are welcome. Well, yes our life is always hard when it comes to using new features vs beta software :) If it works without any problem just ignore the warning but I highly doubt about that. In this case, maybe you can use @Josep's suggestion in his comment in the other answer given here: `path="/(admin|library)"` – devserkan Dec 30 '18 at 18:57
-1

The error message is telling you that path does not take an array, just a string.

To do what you need, just create 2 route entries like this

<Route
  path={'/admin'}
  render={props => (
    <Header {...props} />
  )}
/>
<Route
  path={'/library'}
  render={props => (
    <Header {...props} />
  )}
/>
Mikkel
  • 7,693
  • 3
  • 17
  • 31
  • 1
    It turns out that nowadays the `path` property does [accept an array of strings](https://reacttraining.com/react-router/web/api/Route/path-string-string). Also, even if it didn't, there is no need to have a duplicate Route for each option... There are better and DRYer ways of accomplishing the same: i.e. `path="/(admin|library)"` – Josep Dec 30 '18 at 02:42