react-router 2.8链接添加路径而不是替换

时间:2016-11-14 11:20:57

标签: hyperlink pagination react-router

我尝试使用react-router和redux进行分页。 为了简化这种情况,我删除了我的paginator并只留下了News组件。 我也有同样的问题。当我按下按钮路线添加到路径。路径看起来像'http://localhost:3000/news/page/news/page/news/page/4'。

import React, { Component } from 'react'
import { Link } from 'react-router'
  
export default class News extends Component {
  render() {
    let nextPage = + (this.props.params.page || 1);
    return(
    <div>
    <h1>I am on {nextPage}</h1>
    <ul>
      <li><Link to='news/page/2'>Page2</Link></li>
      <li><Link to='news/page/3'>Page3</Link></li>
      <li><Link to='news/page/4'>Page4</Link></li>
    </ul>
    </div>
  )
    }}

export const routes = (
  <div>
    <Route path='/' component={App}>
      <IndexRoute component={Home}/>
      {/*}<IndexRedirect to='list' />*/}
      <Route path='/news(/page/:page)' component={News}/>    
      <Route path='/admin' component={Admin}  onEnter={Admin.onEnter}/>
      <Route path='products' component={Products}/>
      <Route path='contacts' component={Contacts}/>
      <Route path='about' component={About} />
      <Route path='login' component={LoginPage} />
      <Route path='orders' component= {Orders}/>
      <Route path='signup' component={SignupPage}/>
      <Route path='validateEmail' component= {requireIdentification(ValidateEmail)}/>
      <Route path='/verifyEmail/:token' component={CheckEmail}/>
    </Route>
    <Route path='*' component={NotFound} />
  </div>
)

1 个答案:

答案 0 :(得分:2)

决定是

&#13;
&#13;
<li><Link to='/news/page/2'>Page2</Link></li>
&#13;
&#13;
&#13;

而不是

&#13;
&#13;
<li><Link to='news/page/2'>Page2</Link></li>
&#13;
&#13;
&#13;