单击 <link> 路由不起作用，但在重新加载 URL 时它起作用答案

【问题标题】：On click on a <link> routing not working but on reloading URL it works单击 <link> 路由不起作用，但在重新加载 URL 时它起作用
【发布时间】：2020-03-01 18:01:08
【问题描述】：

需要帮助！在我的应用程序中，我创建了一个“链接”，用于从当前页面导航到另一个页面，为此我使用了路由，它的工作方式类似于单击链接 URL 更改但页面未导航到网址栏上指定的网址，点击后重新加载网址即可直接访问。

我是这项技术的新手，如果我在某个地方出了问题，请告诉我。

App.js

import React from 'react';
import InstaGallery from './components/instaGallery.js';
import Home from './components/home'
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom'


function App() {
  return (
    <Router>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route path='/instagallery' component={ InstaGallery } />
      </Switch>
    </Router>

  );
}

export default App;

Link.js

<Link to={'/instaGallery'} replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
            {/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
            HOME</span></Link>

instaGallery.js

//Page to be navigated on click of link
import React from "react";
import $ from "jquery";

class InstaGallery extends React.Component {
  // another function starts

  render() {
    return (
      <div className="container-fluid no-padd">
        <div className="gallery-wraper">
          <div className="main-grid">
            <p className="p-subtext">Tag us to be featured</p>
            <p className="p">#yallaparty</p>
            <div className="item item1 open" />
            <div className="item item2" />
            <div className="item item3" />
            <div className="item item4" />
            <div className="item item5" />
          </div>
          <div className="description-wraper">
            <div className="pen-description">
              <div className="date">06/03</div>
              <div className="star-ratings-review">
                <div className="star-ratings-gallery"><span>★</span><span>★</span><span>★</span><span>★</span><span>★</span></div>
                <p className="review-text">
                  Thank you so much! You did an amazing job on
                  such short notice. Yalla Party was a major help
                  and I’ll definitely refer you. Good luck for the
                  future!
            </p>
                <p className="text-person">JUMA AL MAJID</p>
              </div>
            </div>
            <div className="gallery-btn"><span>
              <button className="gallery-prev-btn">
                <img src="https://i.ibb.co/hDfxkr6/Group-629.png" alt="" className="gallery-btn-arrow" />
              </button></span><span><button className="gallery-nxt-btn">
                <img src="https://i.ibb.co/3hpG9rc/Group-628.png" alt="" className="gallery-btn-arrow" />
              </button></span></div>
          </div>
        </div>
      </div>
    );
  }
}

【问题讨论】：

那么当你点击链接时，页面url改变了但是组件没有渲染？
没错，不知道为什么..？

标签： javascript html reactjs react-router

【解决方案1】：

您必须从 Link 标签中删除 {}，例如

<Link to='/instaGallery' replace className="menu-anchor"><span><img className="nav-menu-icon" src="https://i.ibb.co/NN8QH7s/Group-1530.png" alt="" />
        {/* <img className="nav-menu-icon-hover" src="https://i.ibb.co/k8kVNk9/Group-2958.png" alt="" /> */}
        HOME</span></Link>

【讨论】：

不...这种改变不走运
任何组件内的评论都是有效的。！！

【解决方案2】：

尝试使用path="/" 删除exact。
添加render方法并在InstaGallery组件中返回一些东西。

问题：为什么要在InstaGallery 组件中导入jQuery？

【讨论】：

对不起..你的意思是渲染..？
class InstaGallery extends React.Component{ render() { return
some example return
; } }
检查一下..现在我已经添加了我之前没有的代码