此反应onClick不起作用是此路由器链接错误吗？

问题描述

我学习了React，想让<iframe width="640" height="520" src="https://www.youtube.com/embed/<VideoID>"> </iframe>工作，但是代码中有问题

基本上，我单击了此处的图像：

from google.cloud import bigquery

bigqueryClient = bigquery.Client()
jobConfig = bigquery.LoadJobConfig()
jobConfig.skip_leading_rows = 1
jobConfig.source_format = bigquery.sourceFormat.CSV
jobConfig.write_disposition = bigquery.Writedisposition.WRITE_APPEND   
jobConfig.autodetect=True

datasetName = "dataset-name"
targetTable = "table_name"
uri = "gs://bucket_name/file.csv"
tableRef = bigqueryClient.dataset(datasetName).table(targetTable)
bigqueryJob = bigqueryClient.load_table_from_uri(uri,tableRef,job_config=jobConfig)
bigqueryJob.result()

但是react-router-dom应该调用onImageClick = val => { return( <Link to={{ pathname: "/timeLineViewer",productdetailProps: { productdetail: {val.week } } }}> </Link> ) };构造函数，但不起作用

这是App

Link

请告知我是React的新手

更新这是具有TimeLineViewer

的组件

import React,{ Component } from "react";
import { browserRouter as Router,Switch,Route } from 'react-router-dom'

import Header from "./components/structure/Header";
import Content from "./components/structure/Content";
import Footer from "./components/structure/Footer";
import TimeLineViewer from './components/sections/TimeLineViewer'

class App extends Component {

  render() {
    return (
      <Router>
      <div>
        <Header />
        <Content />
        <Footer />
      </div>
      <Switch>
        <Route path="/timeLineViewer">
          <TimeLineViewer />
        </Route>
      </Switch>
    </Router>
    );
  }
}

export default App;

更新这是一张看起来像的图片

解决方法

您可以更改吗

        <Route path="/timeLineViewer">
          <TimeLineViewer />
        </Route>

对此

        <Route path="/timeLineViewer" component={TimeLineViewer} />

我认为您的代码库中有类似的内容

const Container = () => {
...
return (
...
  <img src="..." onClick={onImageClick = val => {
   return(
    <Link
      to={{
        pathname: "/timeLineViewer",productdetailProps: {
        productdetail: {val.week }
        }
       }} />
     )
  };}/>
...
)
}

这是错误的，因为如果要重定向onClick，则需要使用历史记录API https://reactrouter.com/web/api/Hooks/usehistory 如果将Link放回onClick事件，它将无法到达JSX并且永远不会呈现。因此，如果未渲染链接，则该链接不起作用）

您还可以使用链接包装图片

const Container = () => {
...
return (
...

   <Link
      to={{
        pathname: "/timeLineViewer",productdetailProps: {
        productdetail: {val.week }
        }
       }}>
      <img src="..." />
   </Link>
     )
  };}/>
...
)
}

更新这样的东西应该起作用

...
import { withRouter } from "react-router";

class Timeline extends React.Component {

....
    onImageClick = val => {
        const {history} = this.props;
       // TimeLineViewer={val.week}
       history.push("/timeLineViewer",{productdetailProps: {
           productdetail: "I M passed From Props"
          }});
      };

    ....
    }
}

export default withRouter(Timeline)

react-router-dom reactjs reactjs