Ссылка с маршрутизатора обновляет всю страницу, когда она не должна

Question

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

Это мой код в 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

Answer 1

Исправление

При импорте шаблонов HTML в React, что является одной из наших задач, когда мы работаем для кого-то другого, вы должны убедиться, что:

Сначала поймитерабочая среда вокруг шаблона и его JavaScript-кода.

Я нашел решение проблемы, просто удалив простой класс ajax в моих элементах, чтобы предотвратить самозагрузку сайта.

И затем добавление шаблонных вызовов функции JavaScipt внутри моей функции обратного вызова в функции setState().(Когда документ действительно загрузился.)

componentDidMount(){
    this.setState({
        example: value
    },function(){
        window.initDogma()
    })
}

Это исправило все.Надеюсь, что это поможет кому-то еще в будущем!

Answer 2

Вы не используете Switch из react-roter-dom в своем коде

Измените файл RouterConfig.js следующим образом

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

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

export default RouteConfigExample;