Stripes: Use a Route in a Pane

Hi,

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: https://gist.github.com/rchr/68088b32a2bb802a2f41e365481d2d7b

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:

return(
  <div>
    <Paneset>
      <Pane defaultWidth="16%" paneTitle={<div style={{ textAlign: 'center' }} >
        ...
      </Pane>
      <Route
        path={'/amsl/detail/:uri'}
        render={() => <this.connectedDetails {...this.props} />}
      />
    </Paneset>
  </div>
);

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

this.props.history.push(/amsl/detail/${uri});

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.

2. 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,
Richard

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

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.