React Router not handling URLs with slashes

[reactgo]

React Router not handling URLs with slashes

[psimyn]

change name="about/us" to path="about/us"

[psimyn]

@choonkending possibly worth changing all the routes to use path? I'm not sure of the purpose of name in routes

[joshhornby]

@psimyn Ah yes! How stupid of me! Thanks

[choonkending]

@psimyn Thanks. Had a look Route API. I'll give it a test tomorrow. Definitely worth changing.

[joshhornby]

@psimyn @choonkending Seems that there is an issue on refresh, for example if I have <Route name="about" path="about/us" handler={About} /> and I go to the page from the nav bar it works, but if I was to go to the page directly http://localhost:3000/about/us I'd get the following errors:

Warning: No route matches path "/about/us". Make sure you have <Route path="/about/us"> somewhere in your routes Warning: No route matches path "/about/assets/styles/main.css". Make sure you have <Route path="/about/assets/styles/main.css"> somewhere in your routes Warning: No route matches path "/about/assets/app.js". Make sure you have <Route path="/about/assets/app.js"> somewhere in your routes

[psimyn]

@joshhornby check your path again :)

missing leading slash

[joshhornby]

<Route name="about" path="/about/us" handler={About} />

Same error.

Warning: No route matches path "/about/assets/styles/main.css". Make sure you have <Route path="/about/assets/styles/main.css"> somewhere in your routes Warning: No route matches path "/about/assets/app.js". Make sure you have <Route path="/about/assets/app.js"> somewhere in your routes

[choonkending]

This seems like an issue with react router not finding the correct handler
on the server. Might because the name is different from path.

Also could you try pulling the latest changes? The other warnings should
not appear now because I fixed the source map issue.

On Fri, 24 Jul 2015 18:33 Josh Hornby [email protected] wrote:

Same error.

Warning: No route matches path "/about/assets/styles/main.css". Make sure
you have somewhere in your
routes
Warning: No route matches path "/about/assets/app.js". Make sure you have
somewhere in your routes

—
Reply to this email directly or view it on GitHub
#40 (comment)
.

[choonkending]

Also is there a reason why you have /about/us? It normally suggests that
there is a nested route.

I would normally name it /about-us :)

On Fri, 24 Jul 2015 18:54 choon ken ding [email protected] wrote:

This seems like an issue with react router not finding the correct handler
on the server. Might because the name is different from path.

Also could you try pulling the latest changes? The other warnings should
not appear now because I fixed the source map issue.

On Fri, 24 Jul 2015 18:33 Josh Hornby [email protected] wrote:

Same error.

Warning: No route matches path "/about/assets/styles/main.css". Make sure
you have somewhere in your
routes
Warning: No route matches path "/about/assets/app.js". Make sure you have
somewhere in your routes

—
Reply to this email directly or view it on GitHub
#40 (comment)
.

[joshhornby]

@choonkending Just an example to illustrate to bug more than anything.

[choonkending]

Ahh I see. Lol sorry about that. I thought I should call that out in case
you were doing that in production hehe.

I'll try to replicate your issue later and give you feedback

On Fri, 24 Jul 2015 19:00 Josh Hornby [email protected] wrote:

@choonkending https://github.com/choonkending Just an example to
illustrate to bug more than anything.

—
Reply to this email directly or view it on GitHub
#40 (comment)
.

[choonkending]

@joshhornby

<Route name="about" path="/about/us" handler={About} /> shouldn't have a problem. I don't think the issue is this. I used <Route name="about" path="about/us" handler={About} /> and it worked for me.

I could access the page, but I needed to put a leading slash in my src in base.html

<script type="text/javascript" charset="utf-8" src="/assets/app.js"></script>

Also needed to change "rel": "stylesheet", "href": "/assets/styles/main.css" in helmconfig.js.

^^ Those two will be fixed in the CSS Modules PR that will be merged soon-ish :)

@psimyn I read a bit more in router docs - this section.

We need the name in Route for <Link to="name"></Link>. Also makes more sense for semantic reasons.

Also, react-router beta is out! Rejoice!

[joshhornby]

Perfect this seemed to fix it 👍 thanks @choonkending