Question

我正在寻找一种使用ReactDOM.render在React Router中创建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）。但是，如果我直接在render函数中返回MapPopup，则它可以工作（显然不在弹出窗口中，但Link可以这样工作）。

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

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

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

Answer 1

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

为了避免这种限制，可以使用https://localhost/runtime.js代替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")
    );
  }
}

和

this thread供参考

使用ReactDOM.render将链接添加为Router的子级时，会产生“您不应在<router>外使用<link />”。

1 个答案: