使用 ReactDOM.render 将链路添加为路由器的子级会产生"You should not use <Link> outside a <Router>"

Question

我正在寻找一种使用ReactDOM.render在React路由器中创建Link的方法。设置或多或少看起来像这样：

const router = (
  <div>
    <Router>
      <Route path="/map" component={Map}/>
    </Router>
  </div>
);

Map.jsx的相关部分看起来像：

const MapPopup = () => {
  return (
    <Link to={`/map/add`} />
  )
}
class Map extends React.Component {
  componentDidMount() {
    this.map = L.map('map')
    //...stuff...
    this.map.on('contextmenu', event => {
      popup
        .setLatLng(event.latlng)
        .addTo(this.map)
        .setContent(
          ReactDOM.render(
            MapPopup(),
            document.querySelector('.leaflet-popup-content')
          )[0]
        )
        .openOn(this.map)
    })
  }

  render() {
    return (
      <React.Fragment>
        <div id="map" />
      </React.Fragment>
    )
  }
}

我基本上试图将Link添加到传单提供的地图弹出窗口(我不能为此项目使用React-Leaflet(。但是，如果我直接返回渲染函数中的映射(显然不在弹出窗口中，但链接确实可以使用(。

<React.Fragment>
    <div id="map" />
    <MapPopup />
</React.Fragment>

有人知道我如何解决这个不寻常的问题吗？

我正在使用"react-router-dom": "4.3.1"。

Answer 1

这是预期的错误，因为<Link>组件期望祖先组件是路由器类型(<BrowserRouter>，<MemoryRouter>，<Router> ...(，请参阅此线程以获取更多详细信息。

对于您的方案，可以使用此限制ReactDOM.createPortal而不是ReactDOM.render：

<Route
    path="/popup"
    render={() => (
              <Popup>
                <div>
                  Some content goes here
                  <Link to="/map"> Back to map</Link>
                </div>
             </Popup>
          )}
/>

其中

class Popup extends React.Component {
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      document.querySelector("#link-render-div")
    );
  }
} 

和

这是您参考的演示