javascript - 如何在同一个按钮上使用 react router 和 react scroll？

Question

我想在同一个 Nav 链接上使用 react-router 和 react-scroll。如果我在主页上，我希望按钮具有反应滚动行为。如果我在不同的页面上，按钮需要返回主页，然后滚动到首选组件( react 滚动行为)

这是我想到的，但它不能正常工作。

import { Link } from 'react-router-dom';
import { Link as LinkRoll } from 'react-scroll'

                           <Link
                               to='/'
                               className='nav-links'
                           >
                               <LinkRoll
                                   activeClass='active'
                                   to='about'
                                   spy={true}
                                   smooth={true}
                                   offset={-70}
                                   duration={500}
                                   onClick={closeMobileMenu}
                               >
                                   About
                               </LinkRoll>
                           </Link>

Answer 1

App.js

import React from 'react';
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom';
import './style.css';

import Navigation from './Navigation';
import Home from './Home';
import Other from './Other';

export default function App() {
  return (
    <Router>
      <Navigation />
      <Route path="/home">
        <Home />
      </Route>
      <Route path="/other">
        <Other />
      </Route>
      <Route exact path="/">
        <Redirect to="/home" />
      </Route>
    </Router>
  );
}

Navigation.js

import React from 'react';
import { NavLink, useLocation, useHistory } from 'react-router-dom';
import * as Scroll from 'react-scroll';

export default function Navigation() {
  const path = useLocation().pathname;
  const location = path.split('/')[1];
  const history = useHistory();
  const scroller = Scroll.scroller;

  const scrollToAnchor = () => {
    scroller.scrollTo('anchor', {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: 50
    });
  };

  const goToHomeAndScroll = async () => {
    await closeMobile();
    await history.push('/');
    await scroller.scrollTo('anchor', {
      duration: 1500,
      delay: 100,
      smooth: true,
      offset: 50
    });
  };

  const closeMobile = () => {};

  return (
    <div className="container">
      <div className="navigation">
        <NavLink to="/home" activeClassName="active">
          Home
        </NavLink>
        <NavLink to="/other" activeClassName="active">
          Other Page
        </NavLink>
      </div>
      {location === 'home' ? (
        <button onClick={scrollToAnchor}>Scroll to anchor</button>
      ) : (
        <button onClick={goToHomeAndScroll}>
          Go to Home and Scroll to anchor
        </button>
      )}
    </div>
  );
}

Home.js

import React from 'react';
import * as Scroll from 'react-scroll';

export default function Home() {
  const Element = Scroll.Element;

  return (
    <div>
      <h1>Home</h1>
      <p>Welcome</p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed gravida
        fermentum purus egestas blandit. Nam nisl sem, feugiat hendrerit magna
        non, ullamcorper pharetra nibh. Sed vestibulum nisi enim, non bibendum
        lorem aliquam non. Cras turpis risus, elementum a sapien quis, dictum...
      </p>
      <p>
        Sed volutpat, turpis vitae cursus viverra, quam tortor maximus felis,
        tempus eleifend nulla metus et sapien. Curabitur vitae sodales dolor.
        Phasellus a ultrices felis. Aenean efficitur nibh sit amet tortor...
      </p>
      <Element name="anchor">
        Nam nisi nisi, aliquet at blandit et, pulvinar sit amet quam. Sed
        euismod ex dui, posuere tristique purus tincidunt in. Orci varius
        natoque penatibus et magnis dis parturient montes, nascetur ridiculus
        mus. Vestibulum sit amet nisi commodo, pretium quam non, scelerisque...
      </Element>
    </div>
  );
}

Other.js

import React from 'react';

export default function Other() {
  return (
    <>
      <h1>Other page</h1>
      <p>blablabla</p>
    </>
  );
}

演示:Stackblitz

同样的结果没有反应滚动:Stackblitz