Reactjs 此react onClick不起作用此路由器链接是否错误？

我学习了React，想让React路由器dom正常工作，但代码中有些错误

基本上，我点击了一张图片，图片显示在这里：

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

请告诉我，我是新来的

更新 以下是具有图像单击功能的组件

//import Timeline from "../elements/Timeline";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import React, { Component } from "react";
import Resume from "../../resume.json";
import TimeLineViewer from "./TimeLineViewer"
import { Link } from 'react-router-dom'

export default class Timeline extends React.Component {

    constructor(props) {
        super(props)
        this.changeHandler = this.changeHandler.bind(this)
        this.changeSlider = this.changeSlider.bind(this)
        this.state = {
            slideIndex: 0,
            updateCount: 0,
            settings: {
                dots: false,
                infinite: true,
                speed: 500,
                slidesToShow: 1,
                slidesToScroll: 1,
                afterChange: () =>
                    this.setState(state => ({ updateCount: state.updateCount + 1 })),
                beforeChange: (current, next) => this.setState({ slideIndex: next })
            }
        }
    }

    changeHandler(e) {
        this.sliderWrapper.slider.slickGoTo(e.target.value)
    }

    changeSlider() {
        this.setState({
            slideIndex: this.sliderWrapper.slider.innerSlider.state.currentSlide
        })
    }

    changeUpdateCount(e) {
        this.setState({
            updateCount: this.state.updateCount + 1
        }, () => console.log(`test state after update: ${this.state.updateCount}`))
    }

    onImageClick = val => {
       // TimeLineViewer={val.week}
       return(
        <Link
        to={{
          pathname: "/timeLineViewer",
          productdetailProps: {
           productdetail: "I M passed From Props"
          }
       }}>
         </Link>
         )
      };

    render() {
        return (
            <div className="container" id="timeline">
                <h2>Slick Go To</h2>
                <p>Total updates: {this.state.settings.updateCount} </p>
                <input onChange={this.changeHandler} value={this.state.slideIndex} type='range' min={0} max={3} />
                <SliderWrapper onImageClick={this.onImageClick}
                    ref={sliderWrapper => this.sliderWrapper = sliderWrapper}
                    beforeChange={this.changeUpdateCount.bind(this)}
                    afterChange={this.changeSlider.bind(this)}
                    slideIndex={this.state.slideIndex}
                    updateCount={this.state.updateCount}
                />
            </div>
        );
    }
}


class SliderWrapper extends React.Component {

    shouldComponentUpdate(nextProps, nextState) {
        // certain condition here, perhaps comparison between this.props and nextProps
        // and if you want to update slider on setState in parent of this, return true, otherwise return false
        if (this.props.updateCount !== nextProps.updateCount) {
            return false
        }
        return true
    }

    sliders() {
        return Resume.weeks.map(week => {
            return (
                // Timeline items
                <section className="timeline-carousel">
                    <h1>week {week.week}</h1>
                    <div className="timeline-carousel__item-wrapper" data-js="timeline-carousel">
                        <div className="timeline-carousel__item">
                            <div key={week} className="timeline-carousel__image">
                                <img onClick={() => this.props.onImageClick(week)} alt="image" src={week.frontImage}  />
                                <h2>UNDER CONSTRUCTION IN PROGRES..</h2>
                            </div>
                            <div className="timeline-carousel__item-inner">
                            <div className="pointer" />
                                <span className="year">{week.year}</span>
                                <span className="month">{week.albumDate}</span>
                                <p>{week.summary}</p>
                                <a href="#" className="read-more">Read more</a>
                            </div>
                        </div>
                    </div>
                </section>
             )
        });
    }

    render() {
        const settings = {
            dots: false,
            infinite: false,
            speed: 100,
            slidesToShow: 4,
            slidesToScroll: 1,
            afterChange: this.props.afterChange,
            beforeChange: this.props.beforeChange,
            responsive: [
                {
                  breakpoint: 700,
                  settings: {
                    arrows: false,
                    slidesToShow: 3
                  }
                },
                {
                  breakpoint: 500,
                  settings: {
                    arrows: false,
                    slidesToShow: 2
                  }
                },
                {
                  breakpoint: 400,
                  settings: {
                    arrows: false,
                    slidesToShow: 1
                  }
                }
            ]
        };
        return (
            <div >
                <Slider ref={slider => this.slider = slider} {...settings}>
                    {this.sliders()}
                </Slider>
            </div>
        );


    }
}

//从“./elements/Timeline”导入时间线；
从“react slick”导入滑块；
导入“slick carousel/slick/slick.css”；
导入“slick carousel/slick/slick theme.css”；
从“React”导入React，{Component}；
从“../../Resume.json”导入简历；
从“/TimeLineViewer”导入TimeLineViewer
从“react router dom”导入{Link}
导出默认类Timeline扩展React.Component{
建造师（道具）{
超级（道具）
this.changeHandler=this.changeHandler.bind（this）
this.changeSlider=this.changeSlider.bind（this）
此.state={
幻灯片索引：0，
updateCount:0，
设置：{
点：错，
无限：是的，
速度:500,，
幻灯片放映：1，
幻灯片滚动：1，
变更后：（）=>
this.setState（state=>（{updateCount:state.updateCount+1}）），
beforeChange:（当前，下一个）=>this.setState（{slideIndex:next}）
}
}
}
变更处理程序（e）{
this.sliderRapper.slider.slickGoTo（e.target.value）
}
changeSlider（）{
这是我的国家({
slideIndex:this.sliderRapper.slider.innerSlider.state.currentSlide
})
}
changeUpdateCount（e）{
这是我的国家({
updateCount:this.state.updateCount+1
}，（）=>console.log（`update后的测试状态：${this.state.updateCount}`）
}
onImageClick=val=>{
//TimeLineViewer={val.week}
返回(
)
};
render（）{
返回(
滑头
更新总数：{this.state.settings.updateCount}

this.sliderRapper=sliderRapper}
beforeChange={this.changeUpdateCount.bind（this）}
afterChange={this.changeSloider.bind（this）}
slideIndex={this.state.slideIndex}
updateCount={this.state.updateCount}
/>
);
}
}
类SliderRapper扩展React.Component{
shouldComponentUpdate（下一步，下一步状态）{
//这里的某些条件，可能是this.props和nextrops之间的比较
//如果您想更新此项父项中setState上的滑块，请返回true，否则返回false
if（this.props.updateCount！==nextrops.updateCount）{
返回错误
}
返回真值
}
滑块（）{
返回Resume.weeks.map（week=>{
返回(
//时间线项目
周{周。周}
正在建设中。。
{周.年}
{week.albumDate}
{星期摘要}

)
});
}
render（）{
常量设置={
点：错，
无限：错，
速度:100,，
幻灯片放映：4，
幻灯片滚动：1，
后变：这个。道具。后变，
beforeChange:this.props.beforeChange，
响应：[
{
断点：700，
设置：{
箭头：错，
幻灯片放映：3
}
},
{
断点：500，
设置：{
箭头：错，
幻灯片放映：2
}
},
{
断点：400，
设置：{
箭头：错，
幻灯片放映：1
}
}
]
};
返回(
this.slider=slider}{…settings}>
{this.sliders（）}
);
}
}

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

你能改变这个吗

对此

你能改变这个吗

对此

---

我认为在你的例子中，你的代码库中有类似的东西

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

---

我认为在你的例子中，你的代码库中有类似的东西

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

---

谢谢我更新了我的问题，

onImageClick

只是一个函数，您需要使用历史记录。您可以通过HOC将其添加到组件中。为withRouter和HistoryThank添加的示例看起来很有效，但只需第一次单击即可。TimeLineViewer构造函数正在获取道具，但再次单击构造函数不会运行。当然，我知道它只在创建组件时运行。当您单击不同的图像url时，url不会更改，您需要将查询参数添加到链接以使其工作@yagizhan.avci为您的问题添加了一个解决方案的链接）看一看，谢谢我更新了我的问题，

onImageClick

只是一个功能，您需要使用历史记录。您可以通过HOC将其添加到组件中。为withRouter和HistoryThank添加的示例看起来很有效，但只需第一次单击即可。时间线查看器C

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)