Question

我找到了一些答案，指出我们可以使用hash来解决此问题，但我无法使用它，因为它会使我的Web链接看起来不太好。我想要的是在用户单击我的网站的同一页面中的某些部分时（例如，当您单击about时，导航用户，该链接将看起来像base_url/home#about。

通常我可以在普通的html中使用它，例如像这样的简单行<a href="#about">about</a>，但是我很迷失如何在DOM或至少在reactjs中使用它。我已经尝试解决10天左右的问题，但还是没有运气。

这是我读过的文章，但我认为它太老了：

use-anchors-with-react-router

how-to-create-anchor-tag-in-react-router

有人可以帮助解决这个问题吗？我对这个问题很困惑。

仅供参考，这是我的package.json：

{
  "name": "base",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "history": "^4.9.0",
    "mdbreact": "^4.18.1",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.1",
    "react-router-hash-link": "^1.2.2",
    "react-scripts": "3.0.1",
    "react-scrollable-anchor": "^0.6.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

编辑1

这是我使用hashlink

时的示例

import { HashLink as Links } from 'react-router-hash-link';

<Links to="#about">test</Links>

这是我的主页组件：

import React, { Component } from 'react';

// Component
import './homepage.css';
import Header from '../header/header';
import Footer from '../footer/footer';
import Carousel from './carousel/carousel';
import Banner from './banner/banner'
import Pesanan from './pesanan/pesanan';
import Value from './value/value';
import About from './about/about';
import Order from './order/order';
import Klien from './klien/klien';
import Portfolio from './portfolio/portfolio';

class Homepage extends Component {
  render(){
    return (
      <div className="body">
        <Header />
        <Carousel id="promotion-banner" />
        <Banner />          
        <Pesanan id="status" />
        <Value id="value" />
        <About id="about" />
        <Order id="order" />
        <Klien id="client" />
        <Portfolio id="portfolio" />
        <Footer id="contact" />
      </div>
    );  
  }
}

export default Homepage;

这是我的app.js：

import React from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';

// Components
import './App.css';
import Homepage from './Components/homepage/homepage';

function App() {
  return (
    <div>
      <Router history={history}>
        <Switch>
          <Route exact path="/" component={Homepage} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

如何在react.js中使用锚ID标签历史记录

0 个答案: