如何在React路由器中的组件内重定向?

时间:2016-03-07 17:16:17

标签: reactjs react-router

如何在React路由器中的组件内重定向?我正在使用react-rouer

import React from 'react'
import _ from 'lodash';
import FavoriteItem from '../components/FavoriteItem'

const FavoritesList = ({list}) => {

    let transitionToItem = ({id}) => {
        // make transition to `/details/${id}`
    };

    return (
        <ul className="list-group favorites-list">
            <FavoriteItem onFavoriteClick={ () => { transitionToItem(item); } } key={item.id} item={item}/>
        </ul>
    );
};


export default FavoritesList

路线:

<Route path="details/:item" name="details" component={DetailsPage}/>

1 个答案:

答案 0 :(得分:6)

我认为执行此操作的首选方法是在react-router Link元素中包含您点击的任何元素,并让路由器处理所有内容。

<Link to=`/details/${item_id}`>Click me!</Link>

如果您肯定想采取您的方法,请将反应路由器中的browserHistory模块导入您的组件,然后将新网址直接拖到它上面。

import { browserHistory } from 'react-router';
...
let transitionToItem = ({id}) => {
  browserHistory.push(`/details/${id}`);
};