Question

使用以下方法未在（组件）重定向上卸载React D3组件。也就是说，在SPA中，在“ graphA”上单击按钮将重定向到“ graphB”。 “ graphB”已呈现，但是“ graphA”仍可见。关于如何删除/卸载“ graphA”以使仅“ graphB”可见的思考。我尝试在各种React生命周期挂钩中调用ReactDOM.unmountComponentAtNode()，但没有成功。

this.props.history.push({ pathname: '/graphB' })

Answer 1

假设您使用的是React Router，这就是使用Switch组件的方法。它将为第一个匹配的路径呈现组件。

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const A = () => <h1>A</h1>
const B = () => <h1>B</h1>

const Landing = ({ history }) => {
  const goToA = () => {
    history.push('a');
  }

  const goToB = () => {
    history.push('b');
  }

  return (
    <div>
      <button onClick={goToA}>Go to A</button>
      <button onClick={goToB}>Go to B</button>
    </div>
  )
}

const App = ({ history }) => {
  return (
    <Switch>
      <Route exact path="/" component={Landing} />
      <Route path="/a" component={A} />
      <Route path="/a" component={A} />
    </Switch>
  )
}
render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
  , document.getElementById('root'));

实时示例here。

使用history.push（），React D3组件未在（组件）重定向上卸载

1 个答案: