Stripes: Use a Route in a Pane



I keep struggling with connecting my own Stripes components. I am not quite sure, if my problem is related to React resp. react-router or Stripes (I am using Stripes components). Thus, I am asking my question here first.

I created a minimal example and uploaded the code here:

I have defined a container component with a Pane containing a MultiColumnlist (see Container.js). This list contains some resources. When a resource is clicked inside the MultiColumnList a detail view shall open up and show some details of the selected resource in a new Pane (see Details.js). I also want to encode the selected resource in the URL, thus I am using a Route.

Now I have tested two cases: 1) specifying the Route in my Container as a silbing of the Pane and 2) specifying the Route in the index.js.

  1. I specified the Route as follows:
      <Pane defaultWidth="16%" paneTitle={<div style={{ textAlign: 'center' }} >
        render={() => <this.connectedDetails {...this.props} />}

If an entry in the list is clicked, a new URL is pushed to the history (line 37):


If I do it this way, I get the following error (full error message at pastebin):

Warning: component(…): A valid React element (or null) must be returned. You may have returned undefined, an array or some other invalid object.

  1. If I specify the Route in the index.js, it seems to work. However, the Pane has a width of 100% and I do not know how to change this.

Now my question:
Did I do something wrong in case 1? Or what is the best way to specify my Route?

Thanks in advance,


Okay, my bad. I did not understand React’s router correctly. Now it’s working. :slight_smile:

I had some struggels with the exact prop. Thus, the route did not match correctly…


Hi, rch. I’m afraid I only just got notification of your post – I guess the Discuss summary emails are a bit too infrequent. Anyway, I am glad you found a solution.

In general, if you want a quick response, the #stripes channel on the FOLIO Slack is usually a better bet.