ryanflorence / react-router-relative-links

Relative Links for React Router

This is a WIP with only a couple hours put into the code, but I think it works, give it a shot, send some pull requests if you run into issues.

Installation

npm install react-router-relative-links react-router-apply-middleware

Usage

import applyMiddleware from 'react-router-apply-middleware'
import { useRelativeLinks, RelativeLink } from 'react-router-relative-links'

// use it like other router middleware
<Router render={applyMiddleware(useRelativeLinks())}/>

// now you can use `RelativeLink` anywhere \o/
<RelativeLink to="../">Up</RelativeLink>
<RelativeLink to="./down">Down</RelativeLink>
<RelativeLink to="../sideways">Sideways</RelativeLink>
<RelativeLink to={{ pathname: 'foo', query: { bar: 'baz' } }}>location descriptors</RelativeLink>
<RelativeLink to={{ query: { bar: 'baz' } }}>just the query</RelativeLink>

react-router-relative-links's Issues

shouldn't react-router put the route info on route components' contexts instead of this middleware?

This middleware is essentially putting info for each route (i.e. route, routes, etc) on the context of that route's component.

Yet I can imagine plenty of other scenarios in which one needs route info on the context; for instance a long time ago I created my own component to put add/remove leave hook methods on the context that work for any descendants of the route component.

Having a middleware wrapper for each feature like these that separately puts route info on the context seems wasteful when react-router itself could create route components within a context wrapper.

Remove react router apply middleware peer dependency

Now that react-router ships with applyRouterMiddleware by default, maybe the peer dependency to react-router-apply-middleware should be removed?

there is incorrect npm link from react-router-restore-scroll to this repo

usage with createElement

Can you please give me an example of how to use the render method with createElement?

I would really like to use relative links but as soon as I drop in the render method on the Router, it doesn't run createElement.

const renderWithMiddleware = applyRouterMiddleware(
    useRelativeLinks()
  );

<Router
        history={history}
        createElement={createElement}
        render={renderWithMiddleware}>

Kind Regards,
Tim

Using React.cloneElement along with react-router-relative-links?

First of all, thanks for this very useful middleware!
Don't know if it's better to create an issue here or in the react-router repo, but anyway:

It seems that using cloneElement to pass more props to this.props.children is not working when a middleware like react-router-relative-links is used.

The new layer RelativeLinksContainer that uses a createElement method to render the final component seems to prevent us from modifying the props set.