Renders <noscript> tag when clicking <Link> using catch-all route.

Hey!

This are my routes currently:

export default (
    <Route path="/">
        <DefaultRoute handler={Main} />
        <Route path="*" handler={Main} />
    </Route>
);

I am using the <Link> tags like so:

<Link to={this.props.menu[menuItem]} className="ps-fg-color-hover">
    {menuItem}
</Link>

When I click the link it created all I get is this:

<div id="react-root">
    <noscript data-reactid=".tnbb9lc2dc"></noscript>
</div>

Any idea how/why this happens?

Thanks!

EDIT: When I do a full refresh it does render correctly with server side rendering too. But when I click a link it goes to the blank page with the <noscript> tag.

EDIT2: The weird thing is that the url does change but it doesn’t seem to call the Main render method or even componentWillMount method at all.

[andyengle]

@dennis-van-bennekom FWIW, I ran into this same problem just now using react-router 1.0. The paths existed, but still the <noscript> stuff was showing up in my DOM. As it turns out, the problem I had was how I was importing.

wrong:

import Link from 'react-router';

right:

import {Link} from 'react-router';

You’re probably well past this error by now, but thought I’d throw in this note in case anyone else encounters the same problem. Thanks!

[taion]

You need to run match on the client side. See https://github.com/rackt/react-router/issues/2036.

There’s a full example demonstrating this on rackt/async-props.