react-router v4单页滚动

时间:2017-12-10 01:08:08

标签: reactjs react-router-v4

是否可以使用react-router v4构建滚动到锚链接页面?像这里的例子https://codepen.io/jooleearr/pen/gpooKj。没有RRv4文档显示如何构建它,除了带有组件的SPA。

这就是我用HTML编写的内容....

<nav>
 <a href="#section1"> Section 1 </a>
 <a href="#section2"> Section 2 </a>
 <a href="#section3"> Section 3 </a>
<nav>


<section id="#section1"> Section 1 </section>
<section id="#section2"> Section 2 </section>
<section id="#section3"> Section 3 </section>

如何使用React Router更正写一个?

const AppRouter = () => (
    <BrowserRouter>
        <div>
            <Header />
            <Switch>
                <Route path="/" exact={true} />
                <Route path="/second" />
                <Route path="/third" />
            </Switch>
        </div>
    </BrowserRouter>
);

const Header = () => (
  <header>
      <NavLink 
            to="#section1" 
            activeClassName="is-active" 
            exact={true}> Section 1</NavLink>
      <NavLink 
            to="#section2" 
            activeClassName="is-active">Section 2</NavLink>
      <NavLink 
            to="#section3" 
            activeClassName="is-active">Section 3</NavLink>
  </header>
); 
提前谢谢。

0 个答案:

没有答案