如何在 React 路由器中的组件内部进行重定向？

IT技术 reactjs react-router
2021-05-21 19:26:56

如何在 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个回答

我认为这样做的首选方法是将您单击的任何元素包装在 react-routerLink元素中，并让路由器处理所有内容。

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

如果您确实想采用您的方法，请将browserHistorymodule从 react-router 导入到您的组件中，然后将新 URL 直接推送到该组件上。

import { browserHistory } from 'react-router';
...
let transitionToItem = ({id}) => {
  browserHistory.push(`/details/${id}`);
};
其它你可能感兴趣的问题
上一篇如何在 CRA (create-react-app) 和 craco 中通过 webpack 设置别名路径？ 下一篇jsx-a11y 返回Form 标签必须有htmlFor 时关联控件