Reactjs 使用链路时的目标特定路由器？

我有一个类似这样的应用程序：

<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>
  );
}

现在，当我点击链接时，它会改变MemoryRouter的URL，但实际上我希望它能改变BrowserRouter的URL

---

我怎样才能告诉Link以BrowserRouter为目标？

好的，你可以这样做。见：

---

您在BrowserRouter中使用MemoryRouter的原因是什么？我有一个多步骤向导，使用MemoryRouter非常容易管理，因为我不想更改实际的URL。问题是，即使rr4以这种方式工作，您也有两条路径相同='/'。那不行。至少使用不同的路径。但这整件事在我看来很奇怪。您可以使用组件状态来显示向导的不同步骤。您不想更改实际的URL，那么为什么还要麻烦使用路由器呢？这是一种解决方法，它只是将路由责任转移到一些自定义代码上。不是solution@FezVrasta . 如果没有URL更改，则没有路由责任。我根据你奇怪的要求给出了一个解决方案。祝你好运

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'));