4

I am using the react-router plugin to setup my routes I want to provide two routes list/ and list/:id (pretty common) What I have and what's working is this:

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
        </Route>
    </Route>
</Routes>

But I am struggling to get my "details" route to work. What I tried is:

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
            <Route name="list.details"
                path="list/:id"
                handler={DetailsComponent}>
        </Route>
    </Route>
</Routes>

First, this is not working currently, my DetailsComponent is not rendered when accessing list/123 (e.g.)

Second, even if this would work: how would I manager to pass one model in my collection "down" to the DetailsComponent?

laser
  • 1,388
  • 13
  • 14
Leo Selig
  • 1,062
  • 1
  • 16
  • 30

1 Answers1

2

To answer your first question, there are two issues with your router code. Coincidentally, a forward slash is the answer to both issues:

  1. You need to close all your Route components. If you write a <Route> by itself, you must include the closing tag like this: <Route/>.

  2. You likely need a forward slash at the start of your list path.

So your code should look something like:

<Routes>
    <Route handler={App}>
        <Route name="list"
            handler={ListComponent}
            collection={new Collection()}>
            <Route name="listDetails"
                path="/list/:id"
                handler={DetailsComponent}/>
        </Route>
    </Route>
</Routes>

Also, just to be clear, the route name is just a string identifier. I'm not sure if you wrote list.details as an object accessor to get to your model, but if so, it's not going to do what you think it will. I changed the name to listDetails to avoid any confusion, but list.details is also a valid string identifier so feel free to change it back if you'd like.

That resolves the code issues in the block you provided here. Without seeing the DetailsComponent component and/or any error messages, I can't say for sure if there are any other issues.

Regarding your second query, the solution is fairly straightforward (although react-router does not have the Backbone integration that you might be hoping for here). However, I'm afraid I'm only permitted to answer one question at a time according to StackOverflow rules. So I'd be happy to provide an answer if you create a separate question.

Eric S. Bullington
  • 1,001
  • 1
  • 11
  • 18
  • First: never edit code blocks in StackOverflow, the syntactic chaos was not in my original code Second: It worked without backslash Third: You're right, one question per question :D Fourth: "fairly straightforward" did the trick, this.activeRouteHandler(props) can be used nested as well of course :) Fifth: Thanks! – Leo Selig Oct 22 '14 at 21:11
  • 1
    Thanks for your comments! For the sake of future readers, I'd like to clarify that it's presumably the path backslash that it worked without, not the one at the end of the sub-nested ``, since the closing tag is absolutely necessary in JSX (and any other XML dialect). And yes, you got it with `this.activeRouteHandler()`. I'm not sure how exactly you did it, but my suggestion was going to be to pass the collection in as a prop and then use the id from the URL as an index to get the model from the collection (`this.props.collection.get(this.props.params.id)` should work, I think). – Eric S. Bullington Oct 22 '14 at 23:00
  • I think you mean just "slash" or "forward slash". a Backslash is "\" which is not what you're talking about. – Paul Ferrett Feb 09 '15 at 04:39
  • Thanks @PaulFerrett, you're right. I embarrassed to think of the number of times I've impatiently explained the difference to non-technical family members and colleagues, and that I missed this blunder despite re-reading the question several times. Thanks for pointing out a significant error in my answer. – Eric S. Bullington Feb 09 '15 at 14:54