I'm having trouble making 3 common things seen on many websites all come together in my react app:
implementing a smooth scroll effect on my main layout - I have had it working using the "react-scroll" package
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
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…