Target specific Router while using Link? - reactjs

Question

I have an app that looks like this:
<BrowserRouter>
<Route path="/" component={Root} />
</BrowserRouter>
// Root.js
function Root() {
return (
<MemoryRouter>
<Switch>
<Route path="/" component={MemRoot} />
<Route path="/bar">
<Link to="/>To browser Root</Link>
</Route>
</MemoryRouter>
);
}
Right now when I click on Link, it's going to change the URL of MemoryRouter, but I'd actually like it to mutate the URL of BrowserRouter.
How can I tell Link to target the BrowserRouter?

Answer 1

Alright, you can do this. See the demo:
import React, { Component } from 'react';
import { render } from 'react-dom';
import {
BrowserRouter,
MemoryRouter,
Route,
Switch,
Link
} from 'react-router-dom';
const Root = props =>
<BrowserRouter>
<Route path="/" render={ () =>
<div>
<p>Home</p>
<button
onClick={ props.onOpen }>
Start Wizard
</button>
</div> } />
</BrowserRouter>;
const MemRoot = props =>
<div>
<p>Wizard Home</p>
<button onClick={ props.onClose }>
Finish Wizard
</button>
<p>
<Link to='/bar'>/bar</Link>
</p>
</div>;
const Wizard = ({ onClose }) =>
<MemoryRouter>
<Switch>
<Route path="/bar" render={ () =>
<div>bar <Link to='/'>/</Link></div> } />
<Route exact path="/" render={ () =>
<MemRoot onClose={ onClose }/> } />
</Switch>
</MemoryRouter>;
const App = () =>
<BranchRoute />
class BranchRoute extends Component {
state = { out: false }
handleClose = () => this.setState({ out: true })
handleOpen = () => this.setState({ out: false })
render () {
const { out } = this.state;
return (
<div>
{ out
? <Root onOpen={ this.handleOpen }/>
: <Wizard onClose={ this.handleClose } />
}
</div>
);
}
}
render(<App />, document.getElementById('root'));