Question

我在我的网站上使用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语句仅用于我加载的页面。）

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;

这是“项目”页面，在这里我使用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>
  )
  }
}

React Router不适用于Safari和Firefox，但适用于Chrome

0 个答案: