编辑

Question

我在使用React Router时遇到一个小问题，当我使用名为WebsiteLoad的第一个组件时，一切似乎都很好，但是当我单击<Link />时，它将刷新整个页面以加载{ {1}}当我只需要它来呈现指定给React-Router的各个组件时。

这是我在/portfolio中的代码：

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

如何使React-Router加载相应的组件，使其保持“一页网站”，而不是发送整个新的HTTP请求？

编辑

我正在为该问题和工作环境添加一个回购协议，以便您可以重现该问题。我仍在寻找解决方法，但没有结果。

这是仓库： https://github.com/k3llydev/hi_website/tree/react-router-issue

以下是应用程序环境：https://hi-website.herokuapp.com

Answer 1

您未在代码中使用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;

Answer 2

修复

在React中导入HTML模板时（这是我们为他人工作时的工作之一），您必须确保：

首先了解模板及其周围的工作环境 JavaScript代码。

我找到了解决此问题的方法，只是删除了元素上的一个简单的ajax类以防止网站重新加载。

，然后在setState()函数的回调函数中添加模板JavaScipt函数调用。（文档加载时。）

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

这解决了所有问题。希望以后对其他人有帮助！

路由器刷新整个页面时的链接

编辑

2 个答案:

修复