Question

需要帮助！在我的应用程序中，我创建了一个“链接”，用于从当前页面导航到另一个页面，并且为此我使用了路由，这就像单击链接URL时一样，但是页面无法导航链接到URL栏上指定的URL，单击后重新加载该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>
    );
  }
}

Answer 1

尝试将exact上的path="/"删除。
添加render方法并在InstaGallery组件中返回某些内容。

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

Answer 2

您必须从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>

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

2 个答案: