Relative <Link/>s not working in v4

[vkbansal]

Version

v4.0.0-alpha.3

//URL Address Bar: localhost/foo/bar
const Foo = ({pathname}) => (
    <div>
     Foo
     <Match pattern={`${pathname}\bar`} component={Bar}/>
    </div>
)

const Bar = ({pathname}) => (
    <div>
     Bar
    <Link to='../'>Go Back</Link>
    </div>
)

Expected Behavior

Upon Clicking on the <Link to='../'>Go Back</Link>:

1. must go to localhost/foo.
2. Rendered Component should change

Actual Behavior

Upon Clicking on the Link:

1. goes to localhost/foo.
2. Rendered Component should change. Current component gets unmounted but new component is not rendered

[timdorr]

I'm not sure if they're supposed to work yet or not. We definitely don't have ".." URLs handled.

[timdorr]

Actually, they work, you just need to build the URL yourself: https://react-router-website-uxmsaeusnn.now.sh/recursive-paths

[vkbansal]

Yes I've seen that example. It demonstrates relative links that go deep and not the other way around. It would be great to have example for it too.

[ryanflorence]

These are really tricky to make work since it's relative to current match, not the actual url, @mjackson has some PoC code on his machine for this, but it's a tricky problem. For now you could take props.pathname or props.pattern, which is relative to the current matched component, and build the url with a path utility.