简体   繁体   English

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

[英]How to make redirect inside component in React router?

How to make redirect inside component in React router? 如何在React路由器中的组件内重定向? I'm using react-rouer 我正在使用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: 路线:

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

I think the preferred way to do this would be to wrap whatever element you're clicking on in a react-router Link element and let the router handle everything. 我认为这样做的首选方法是在react-router Link元素中包含你点击的任何元素,然后让路由器处理所有内容。

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

If you definitely want to take your approach, import the browserHistory module from react-router into your component and push the new URL right onto it. 如果你肯定想采取你的方法,将browserHistory模块从react-router导入你的组件并将新URL直接推到它上面。

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM