React Router не работает в Safari и Firefox, но работает в Chrome - PullRequest
Новая
       127

React Router не работает в Safari и Firefox, но работает в Chrome

0 голосов
/ 25 февраля 2019

Я использую React Router на своем веб-сайте для ссылки на другие страницы.В Google Chrome, когда я нажимаю на ссылку на другую страницу на сайте (через React Router), он работает просто отлично.Однако в Firefox я должен щелкнуть дважды (после первого щелчка текущая страница обновляется, но после второго щелчка загружается новая страница).В Safari он просто обновляет текущую страницу.

Как заставить React Router работать при первом нажатии на Firefox и Safari?

Вы можете сами попробовать это по ссылке Safari http://riceappsv2.surge.sh/. Прокрутите на полпути до места, где выПосмотрите на 5 кружков с логотипами AirBNB и попробуйте щелкнуть ссылку «BeakSpeak».Он должен ссылаться на эту страницу http://riceappsv2.surge.sh/beakspeak.

Вот наш App.JS.5 логотипов AirBNB находятся на странице «Проекты».(Операторы импорта предназначены только для страниц, которые я загружаю.) 

import React, { Component } from 'react';
import { ParallaxProvider } from 'react-scroll-parallax';
import LandingPage from './Pages/LandingPage.js';
import Testimonials from './Pages/Testimonials.js'
import WorkForUs from './Pages/WorkForUs.js';
import JoinUs from './Pages/JoinUs.js';
import Projects from './Pages/Projects.js';
import AboutUs from './Pages/AboutUs.js';
import WhatWeDo from './Pages/WhatWeDo.js';
import Partners from './Pages/Partners.js';
import './App.css';
import './hamburgers.css';
import './styles.css'
import ScrollIntoView from 'react-scroll-into-view';

class App extends Component {
    constructor(props) {
    super(props);
    this.state = {
      clicked: false,
    };
  }

  render() {
    return (
      <ParallaxProvider>
      <div>
        <div>
          <div id="home"><LandingPage /></div>
          <div id="whatWeDo"><WhatWeDo /></div>
          <div id="aboutUs"><AboutUs /></div>
          <div id="projects"><Projects /></div>
          <div id="partners"><Partners /></div>
          <div id="testimonials"><Testimonials /></div>
          <div id="contactUs"><JoinUs /></div>
          <div id="joinUs"><WorkForUs /></div>
        </div>
      </div>
      </ParallaxProvider>
    );
  }
}

export default App;

Вот страница Projects, на которой я использую React Router для ссылки на страницу BeakSpeak.

import React, { Component } from 'react';
import Fade from 'react-reveal/Fade';
import './Projects.css';
import {BrowserRouter as Router, Link} from "react-router-dom";

export default class LandingPage extends Component {
  render() {
    return(
    <div className = "projectsPageWrapper">
     <Fade left duration = {1500}>
        <div id = "beakspeak">
          <div id = "BsTitle">
          <Router>
            <div>
              <Link to = "/beakspeak" onClick = {() => window.location.reload()} class = "link">
                <h1>Beakspeak</h1>
              </Link>
            </div>
          </Router>
          </div>
          <div className = "circle">
            <img className = "airbnb" src = "http://logok.org/wp-content/uploads/2014/07/airbnb-logo-belo-880x628.png" alt=""></img>
            <div className = "projectText">
            Anonymous social media platform exclusively for the Rice community</div>
          </div>
        </div>
      </Fade>
    </div>
  )
  }
}
...