React-router: Create an example to use Router and Link across multiple pages.

[wayofthefuture]

The basic example state of the "Router" is all in the same file / module. When trying to detach the "Topics" component in the example to another file, it behaves differently. I think the basic example is not a "real-life" example as many people would want to separate component routes into multiple pages.

When I try to move the subroutes into another file in another component, subcomponents are now unable to use the "Link" as the context of the router is no longer available. Maybe it is something I'm doing wrong... I don't know. Thanks for your time.

//Entry.jsx
ReactDOM.render(
    <Router>
        <div>
            <Route path="/" component={Landing} />
            <Route exact path="/" render={authenticateRender} />
        </div>
    </Router>,
    document.getElementById('react')
);

//Landing.jsx
<div className={className}>
    <Route path="/login" component={Login} />
    <Route path="/signup" component={Signup} />
    <Route path="/reset-password" component={ResetPassword} />
    {snackbar}
</div>

//Signup.jsx
<div className="flex-center">
    Already have an account? Click here to <Link to="/login">Log in</Link>
</div>

Which then throws:

The context router is marked as required in Link, but its value is undefined

[timdorr]

That definitely should work. Can you share more complete examples of each component file? this.context works regardless of your filesystem and module layout. As long as it's plugged together in the right order at runtime (which this looks right), it should all Just Work™.

[wayofthefuture]

Ok here ya go... Thanks.

//code removed for clarity

[pshrmn]

@wayofthefuture are you certain that both react-router and react-router-dom are the same version (at this point in time, probably 4.0.0-beta.7).

Also, for future reference, it would be easier if you made a gist with all of the separate files and linked it instead of writing one long code block here.

[wayofthefuture]

react-router-dom beta 7 fixed the problem...

I don't think react-router is required? I don't even have it installed.

[pshrmn]

react-router-dom has a dependency of react-router, so it will install it for you. The issue is that it grabs the most recent react-router, so if you were to install beta 6 of the dom package, you would get beta 7 of the core package.

[brettstack]

Looks like latest on npm is 4.0.0-beta.6 from 3 weeks ago

[wayofthefuture]

npm v react-router-dom dist-tags

use: npm i react-router-dom@next --save