paypal / react-engine

a composite render engine for universal (isomorphic) express apps to render both plain react views and react-router views
Apache License 2.0
1.45k stars 130 forks source link

Using React Router Link #82

Closed pizzarob closed 9 years ago

pizzarob commented 9 years ago

I have added a Navigation component within layout.jsx. Currently I have to use anchor tags, rather than React Routers Link component, which would be preferred. When I require the Link component within the render function of the Navigation component I can use Link and it seems to work on the front end, but I get the following error in the console:

Warning: Failed Context Types: Required context 'router' was not specified in 'Link'. Check the render method of 'Nav'.
TypeError: Cannot read property 'makeHref' of undefined

And here is the content of the render function of Nav.

var Link = require('react-router').Link;
            return (
                <nav className="background-first main-nav">
                    <section className="nav-wrap">
                        <section className="main-nav-left">
                            <div className="main-nav-logo"><Logo /></div>
                            <div className="plus-icon" onClick={mobileMenuShow}>+</div>
                        </section>
                        <section className="main-nav-right">
                            <ul ref="navList" className="main-nav-list">
                                <Link to="signup">Signup</Link>
                                <li><a href="/signup">Sign Up</a></li>
                                <li><a href="#">Log In</a></li>
                                <li><a href="#">Quick Start</a></li>
                                <li><a href="#">Docs</a></li>
                                <li><a href="#">About</a></li>
                            </ul>
                        </section>
                    </section>
                </nav>

Is this because the layout component is coming from the server and our router is not available at that time? But why then if I include Link = require('react-router').Link within the render function of Nav does it work after its rendered to the client?

Is there a known way to make Link work in the layout component? Because it seems like that is the most logical place for a navigation.

samsel commented 9 years ago

@realseanp looks like this an issue with react-router discussed here. I read in one of the issue comments that the updated versions of react-router fixes it. let me know.

SOSANA commented 9 years ago

about to embark on a similar issue using "react-router": "1.0.0-beta2" so this should be interesting.

samsel commented 9 years ago

closing this. please reopen if this is still an issue. thanks.