reactjs - How do I implement scroll in React Router while also having paths to separate layouts?

Question

I'm having trouble making 3 common things seen on many websites all come together in my react app:

1. implementing a smooth scroll effect on my main layout - I have had it working using the "react-scroll" package

2. clicking a link and scrolling to a section should update the url path

3)I also need to render a separate "page" for a link that isn't part of the long-layout / main page. This seems to work with React-Router alone, but breaks when adding in any other scroll packages.

I've created a quick test app that I've linked to here to help explain.

https://github.com/firesoflife/router-test3.git

here is my main app component :

import './App.css';
import { Component } from 'react';
import Nav from './components/Nav';
import Home from './pages/Home';
import Books from './pages/Books';
import Music from './pages/Music';
import Projects from './pages/Projects';

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <Switch>
          <Route exact path={['/', '/Books', '/Music']}>
            <Nav />
            <Home />
            <Books />
            <Music />
          </Route>
          <Route path="/projects" component={Projects}>
            <Nav />
            <Projects />
          </Route>
        </Switch>
      </div>
    );
  }
}
export default App;

Here is my nav component using "Link" from the "react-scroll" package:

import React from 'react';
import * as Scroll from 'react-scroll';
import {
  Link,
  Element,
  Events,
  animateScroll as scroll,
  scrollSpy,
  scroller,
} from 'react-scroll';

const Nav = () => {
  return (
    <div className="nav">
      <ul className="nav-items">
        <Link
          className="nav-item"
          activeClass="active"
          to="home"
          spy={true}
          smooth={true}
          offset={-150}
          duration={500}
        >
          Home
        </Link>
        <Link
          className="nav-item"
          activeClass="active"
          to="books"
          spy={true}
          smooth={true}
          offset={-130}
          duration={500}
        >
          Books
        </Link>
        <Link
          className="nav-item"
          activeClass="active"
          to="music"
          spy={true}
          smooth={true}
          offset={-140}
          duration={500}
        >
          Music
        </Link>
        <Link
          className="nav-item"
          activeClass="active"
          to="../pages/Projects.js"
          spy={true}
        >
          <Link to="../pages/Projects.js">Projects</Link>
        </Link>
      </ul>
    </div>
  );
};

export default Nav;

Better methods or other dependencies are welcome. I've tried everything and all combinations of dependencies etc.

Recap: Navigation should:

• scroll to the appropriate section ( Home | Books | Music ) when clicked and update the url path
• clicking on Projects should render the projects component and Nav bar only while also updating the url path
• add the active class to the appropriate nav link

Answer 1

等待大神解答