你能在同一个网站上使用React平滑滚动和React路由器链接吗

Question

所以我最初创建了一个每当我点击导航菜单项时都能平滑滚动的网站，但现在我希望我的按钮链接到其他页面以显示更多信息。

我的问题是对于我的风格组件，我必须从react scroll导入链接以确保它们工作，但现在这与我试图与react路由器链接的导航按钮相冲突

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

我想我的导航链接有反应滚动

export const NavLinks = styled(Link)``

但我想让我的按钮在另一个div内的导航中使用反应路由器

export const NavBtnLink = styled(Link)``

网站平滑滚动并链接到不同页面是正常的吗？还是平滑滚动只适用于一页的静态网站？

如果我不能链接到另一个页面，也就是路线，我不知道我怎么能在一个平滑滚动的网站上有一个注册按钮

下方的代码

React路由器未切换页面

React滚动主页导航链接

<NavLinks
to='home'
smooth={true}
duration={500}
spy={true}
exact='true'
offset={-80}
>
Home
</NavLinks>

反应路由器导航btn

<NavBtnLink to='/signupa'>Sign In</NavBtnLink>

我的App.js

<Router>
<Sidebar isOpen={isOpen} toggle={toggle} />
<Navbar toggle={toggle} />
<Home />
<Switch>
<Route path='/signupa' component={SignUpa} />
</Switch>
<Footer />
</Router>

我的页面文件夹中的注册.js

function SignUpa() {
return (
<>
<h1>Signupa page</h1>
</>
);
}
export default SignUpa;

这是我的主页，显示了我的整个网站和我的反应滚动导航到的部分

function Home() {
return (
<>
<HeroSection />
<InfoSection {...homeObjOne} />
<InfoSection {...homeObjTwo} />
<Services />
<InfoSection {...homeObjThree} />
</>
);
}

HeroSection具有id＝"0"；家；所以它可以滚动到那个部分，但我认为这可能是一个问题，因为如果我导航到另一个页面，idk它将如何将我带回主页'/'

<HeroContainer id='home'>

Answer 1

您可以使用导入的别名来实现这一点

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

然后你就可以在你需要的地方相应地使用新的别名了！