У меня небольшая проблема с React Router, когда я нахожусь в своем первом компоненте под названием WebsiteLoad, все кажется в порядке, но когда я нажимаю <Link />, он обновляет всю страницу для загрузки /portfolio, когда мне просто нужно, чтобы он отображал соответствующие указанные компоненты. к React-маршрутизатору.

Это мой код в WebsiteLoad.js:

import React,{Component} from 'react'
import {Link} from 'react-router-dom'
import Hero from './Home/Hero'

class WebsiteLoad extends Component{
    render(){
      window.initDogma()
        return(
            <div id = "wrapper">
  <div className = "content-holder elem scale-bg2   no-padding">
    <div className = "dynamic-title">Services</div>
    <div className = "content full-height no-padding home-content ">
      <div className = "full-height-wrap">
        <Hero />
        <div className = "overlay" />
        <div className = "enter-wrap-holder cent-holder wht-bg">
          <div className = "enter-wrap">
            <h3>
              <img src = "private_source" alt = "Habitare logo" />
            </h3>
            <Link to = "/portfolio" replace = "false" className = "ajax btn anim-button trans-btn transition ">
              <span>Todos los desarrollos</span>
              <i className = "fa fa-long-arrow-right" />
            </Link>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

        );
    }
}
export default WebsiteLoad;

И мой RouterConfig.js:

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import WebsiteLoad from './WebsiteLoad'
import Portfolio from './Portfolio'

function RouteConfigExample() {
  return(
    <Router>
        <Route exact path = "/" component = {WebsiteLoad} />
        <Route path = "/portfolio" component = {Portfolio} />
    </Router>
  )
}

export default RouteConfigExample;

И код внутри Portfolio.js:

import React, {Component} from 'react'
import Header from './Header'
import SubNav from './SubNav'

class Portfolio extends Component{

    Project = (data = []) =>{
        return (
            <div key = {data} className = "gallery-item houses apartments">
                <div className = "grid-item-holder">
                    <div className = "box-item">
                    <div className = "wh-info-box">
                        <div className = "wh-info-box-inner at">
                        <a href = "portfolio-single.html" className = "ajax">
                            Modern house
                        </a>
                        <span className = "folio-cat">Houses design</span>
                        </div>
                    </div>
                    <img src = "images/folio/thumbs/27.jpg" alt = "Alt" />
                    </div>
                </div>
            </div>
        );
    }

    loadProjects = () =>{
        var Projects = []
        for(var c=0;c<4;c++)
            Projects.push(this.Project(c))
        return Projects
    }

    render(){
        return(
            <div>
                <Header />
                <SubNav />
                <div id = "wrapper">
  <div className = "content-holder elem scale-bg2 transition3">
    <div className = "content ">
      <section className = "no-padding no-border">
        <div className = "filter-holder filter-nvis-column">
          <div className = "gallery-filters at">
            <button
              href = "#"
              className = "gallery-filter gallery-filter-active"
              data-filter = "*"
            >
              All
            </button>
            <button
              href = "#"
              className = "gallery-filter "
              data-filter = ".houses"
            >
              Houses
            </button>
            <button
              href = "#"
              className = "gallery-filter"
              data-filter = ".interior"
            >
              Interior
            </button>
            <button
              href = "#"
              className = "gallery-filter"
              data-filter = ".apartments"
            >
              Apartments
            </button>
          </div>
        </div>
        <div className = "filter-button vis-fc">Filter</div>
        <div className = "gallery-items   hid-port-info" >
            {this.loadProjects()}
        </div>
      </section>
    </div>
  </div>
</div>
</div>

        );
    }
}
export default Portfolio

Как я могу заставить React-Router загружать соответствующие компоненты, сохраняя его «одностраничным веб-сайтом», вместо отправки совершенно нового HTTP-запроса?

РЕДАКТИРОВАТЬ

Я добавляю репо с проблемой и рабочей средой, чтобы вы могли воспроизвести проблему. Я все еще ищу исправление, но безрезультатно.

Вот репо: https://github.com/k3llydev/hi_website/tree/react-router-issue

Вот среда приложения: https://hi-website.herokuapp.com