Как получить маршрут маршрута для загрузки для <Link>компонента с помощью onClick?

Question

Я настроил простое SPA с использованием реагирования и реакции-маршрутизатора, и все мои маршруты работали нормально. Я ввел ссылку в одном из дочерних компонентов с путем к одному из моих маршрутов. Ссылка изменяла путь в URL-адресе, однако, когда я добавил обработчик onClick, чтобы представление на странице обновлялось, URL-адрес больше не отображает обновленный путь. Содержимое загружается правильно, но URL не показывает пользователю новую иерархию пути / страницы ... Я включу свой код, вы увидите, что я использую функцию обратного вызова для onClick ... не уверен, если что вызывает проблему? Или, если проблема заключается в том, что путь содержит переменную, значение которой асинхронно с функцией обратного вызова onClick ... Я новичок ie, поэтому, пожалуйста, будьте описательны в своих решениях, TIA.

<div className="projPrev">
  <Link
    to={"/work/"+ this.backProjID(this.props.projectData.number)}
    onClick={this.goPrevProj}
  >
    <img
      src={"../Icon/Icon w Text/Previous.png"}
      alt="back arrow"
    />
  </Link>
</div>

это мой код маршрутизации ...

class App extends Component {
  render() {
    return (

      <Router>
        <div className="app">
          <div className="header">
            <Branding />
            <div className="navigation">
              <NavLink to="/work" activeClassName="current" className="notCurrent">Work</NavLink> 
              <NavLink exact to="/about" activeClassName="current" className="notCurrent">About</NavLink>
              <NavLink exact to="/contact" activeClassName="current" className="notCurrent">Contact</NavLink>
            </div>
          </div>
          <div className="content">
            <Switch>
              <Route exact path="/" render={() =><Redirect to='/work'/>}/>
              <Route exact path="/work" component={Work1}/>
              <Route path="/about" component={About1}/>
              <Route path="/contact" component={Contact1}/>
              <Route path="/work/:projectID" exact render={ (props) => { return <ProjectContainer projectId={props.match.params.projectID} />} }  />
            </Switch>
          </div>
          <Footer />
        </div>
      </Router>

    );
  }
}

export default App;

вот ProjectContainer. js

import React from "react";
import Project from "./Project.js";
var projData = require('./ProjData.js');

export default class ProjectContainer extends React.Component {

    state = {
        projID: "",
        number: "",
        name: "",
        heading: "",
        description: "",
        image: "",
        carousel_img1: "",
        carousel_img2: "",
        carousel_img3: "",
        carousel_blurb1: "",
        carousel_blurb2: "",
        carousel_blurb3: "",
    };


    componentDidMount () {
        console.log(this.props.projectId);
        if(this.state.projID !== this.props.projectId) {
            let obj = projData.find(obj => obj.projID === this.props.projectId);
            console.log(obj);
            this.setState(obj);
        }
    }

    submitHandler = (obj) => {
        this.setState(obj);
    }

    render() {

        return (
            <div className="projectContainer">
                <Project projectData={this.state} submitHandler={this.submitHandler}/>
            </div>
        );
    }
}

вот компонент Project. js, он показывает функцию goPrevProj ...

import React from "react";
import {Link} from "react-router-dom";
var projData = require('./ProjData.js');


export default class Project extends React.Component {


componentDidUpdate () {
    console.log(this.props.projectData);
}

backProjID = (currentProjNum) => {
    if (currentProjNum === 1){
        const prevProjNum = 11;
        const prevObj = projData.find(obj => obj.number === prevProjNum);
        return prevObj.projID;
    }
    else if (currentProjNum >1 && currentProjNum < 12){
        const prevProjNum = currentProjNum-1;
        const prevObj = projData.find(obj => obj.number === prevProjNum);
        return prevObj.projID;
    }

}

goPrevProj = (e) => {
    e.preventDefault();

    let currentProjNum = this.props.projectData.number;
    if (currentProjNum === 1){
        const prevProjNum = 11; 
        const prevObj = projData.find(obj => obj.number === prevProjNum); 
        this.props.submitHandler(prevObj); 
    }               
    else if (currentProjNum >1 && currentProjNum < 12){
        const prevProjNum = currentProjNum-1;
        const prevObj = projData.find(obj => obj.number === prevProjNum); 

        this.props.submitHandler(prevObj); 
    }
    else {
        console.log("There's an error with the eventhandler");
    }

}

    render() {

        return (
            <div>
                <div className="projMain">
                    <div className="projNav">
                        <div className="projPrev">
                        {console.log(this.backProjID(this.props.projectData.number))};
                            <Link to={"/work/"+ this.backProjID(this.props.projectData.number)} onClick={this.goPrevProj}><img src={"../Icon/Icon w Text/Previous.png"} alt="back arrow"/></Link>
                        </div>
                        <div className="projNum">{this.props.projectData.number}</div>
                        <div className="projNext"></div>
                    </div>
                    <div className="projInfo">
                        <div className="projName">{this.props.projectData.name}</div>
                        <div className="projHeading">{this.props.projectData.heading}</div>
                        <div className="projDescription">{this.props.projectData.description}</div>
                    </div>
                    <div className="projImage">
                        <img src={this.props.projectData.image} alt="baseball players"/>
                    </div>
                </div>
                <div className="projDetailTab">
                    <div className="tabRectangleLeft">
                        <div className="tabTitle"></div>
                        <div className="tabExpandClose"></div>
                    </div>
                    <div className="tabRectangleRight"></div>
                </div>
                <div className="projDevInfo">
                    <div className="rectangle"></div>
                    <div className="projDevImage">
                        {/* insert the image tag here */}
                    </div>
                    <div className="blurbContainer">
                        <div className="blurb"></div>
                        <div className="controlsContainer">
                            <div className="carouselControls">
                                <div className="prevSlide"></div>
                                <div className="slide1Box"></div>
                                <div className="slide2Box"></div>
                                <div className="slide3Box"></div>
                                <div className="nextSlide"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}