Question

我是一名完全的React新手，并且正在创建一个简单的站点来显示Tableau可视化效果。我正在使用React Router。

我为每个组件和一个功能组件定义了一条路由，这些功能正在添加必要的共享JavaScript以供Tableau显示。在每个组件中，我都使用$ .getJSON来检索该组件的正确可视化。

URL正确更改，但视图中的内容未更改。它只是保持不变。我对React的理解可能还很遥远，任何帮助都将不胜感激。

App.jsx

import React from 'react';
import SiteHeader from './SiteHeader';
import Main from './Main';

class App extends React.Component {

  render() {
    return (
      <div>
        <SiteHeader />
        <Main />
      </div>
    )
  }
}

export default App

Main.jsx（路由器）

import React from 'react'
import { Switch, BrowserRouter, Router, Route } from 'react-router-dom'
import Home from './views/Home'
import ServiceDashboard from './views/ServiceDashboard';
import Feedback from './views/Feedback'

const Main = () => (
  <main>
        <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
        <Route path={`${process.env.PUBLIC_URL}/viz/service-dashboard`} component={ServiceDashboard} />
        <Route path={`${process.env.PUBLIC_URL}/viz/feedback`} component={Feedback} />
  </main>
)

export default Main

Tableau.jsx

const loadViz = () => {
  let tabViz,
    testWorkbook,
    testWorksheet,
    placeholderDiv = document.getElementById('root');

  let options = {
    width: '100%',
    height: '850px',
    hideToolbar: false,
    onFirstInteractive: function () {
      testWorkbook = tabViz.getWorkbook();
      testWorksheet = testWorkbook.getActiveSheet();
      worksheetList = testWorksheet.getWorksheets();
    }
  };

  let parseResponse = function (json) {
    if (tabViz) {
      tabViz.dispose();
    }
    tabViz = new window.tableau.Viz(placeholderDiv, json.uri, options);
  };
}

export default loadViz

ServiceDashboard.jsx

import React from 'react';
import $ from 'jquery';
import '../shared/tableau';

class serviceDashboard extends React.Component {

  componentDidMount() {
    $.getJSON("/tableauServer/myVisualization", parseResponse);
  }

  render() {
    return(
      <div></div>
    )
  }
}

export default serviceDashboard

如果我刷新页面，则能够返回可视化，但是当从一页转到下一页时，可视化不会随路线更新。就像从

出发

<Route path={`${process.env.PUBLIC_URL}/viz/service-dashboard`} component={ServiceDashboard} />

到

<Route path={`${process.env.PUBLIC_URL}/viz/feedback`} component={Feedback} />

Answer 1

尝试将路由包装在路由器/交换机组件上

import { BrowserRouter as Router } from 'react-router-dom';

class App extends React.Component {

  render() {
    return (
      <Router>
        <div>
          <SiteHeader />
          <Main />
        </div>
      </Router>
    )
  }
}

import { Route, Switch, withRouter } from 'react-router-dom';

const Main = (history) => (
  // history comes from withRouter
  <Switch location={history.location}>
        <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home} />
        <Route path={`${process.env.PUBLIC_URL}/viz/service-dashboard`} component={ServiceDashboard} />
        <Route path={`${process.env.PUBLIC_URL}/viz/feedback`} component={Feedback} />
  </Switch>
)

export default withRouter(Main);

反应路由器内容未更改

1 个答案: