如何从React Router向Redux动作获取ID /参数？

Question

如何从React Router向Redux动作获取ID /参数？

3

目前我有一个对象列表页面。我想显示单个对象的详细信息页面（所有操作都使用Reactjs完成）。列出的对象具有以下链接：

<Link to={'/detail/'+this.props.data.id} >Read more</Link>

点击链接后，它将指向另一个页面，在该页面中我想显示该特定对象的所有详细信息。该特定对象的详细信息从http://127.0.0.1:8000/api/v1/songs/55获取，其中55是对象的id。我正在使用Redux从API获取数据。

ListingPage.js

import React from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'

class List extends React.Component {
    render() {
      return (
         <div>
            <Link to={'/detail/'+this.props.data.id} >Read more</Link>                      
        </div>
      );
   }
}
export default List

Home.js

import React from 'react'; 
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom'; 
import List from './ListPage.js'; 
import Detail from './Detail.js'

class Home extends React.Component {    
     render(){      
       return(
            <Router>
              <Switch>
                <Route exact path="/" component={List} />
                <Route path="/detail/:number" component={Detail} />
              </Switch>
            </Router>
        )
    }
 }
 export default Home

Detail.js

import React from 'react';

class Detail extends React.Component {
    render() {
        return (
           <div>{**display details here**}</div>
        )
    }
} 
export default Detail

目前点击链接后，它会指向另一个页面，但没有显示任何详细信息。我不知道如何在react-redux中从链接url中获取id。请帮帮我。（严肃地说，我必须使用Redux）

- Piyal George

你想从 <Link to={'/detail/'+this.props.data.id} 中获取 id 吗？然后将它传递给 react-redux 来管理状态吗？ - Aaqib

是的，点击链接时，当前页面会加载没有任何数据。但我希望该页面有数据。（像任何列表和详细页面功能一样） - Piyal George

你能发布“details”组件的代码吗？ - Aaqib

从API中，我将获得名称、描述等信息。没有更复杂的东西。 - Piyal George

我理解的是您想要获取该ID并将其传递给API以进行请求，并显示名称、描述等内容？ - Aaqib

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shishir · Accepted Answer

您可以使用mapStateToProps来读取通过react-router传递给您的组件的路由参数。您的:number命名参数将在ownProps.match.params.number中可用，您需要将其传递给您的组件。

然后，您的组件将把它传递给您的操作创建器以加载数据。

更多详细信息请参见注释：

import React from 'react';
import { connect } from "react-redux";

class Detail extends React.Component {
    componentWillMount() {
        // When the component mounts 
        // call your action creator to load the details, 
        // if songDetails are not already available
        if (!this.props.songDetails) 
            this.props.loadSongDetails(this.props.songId);
    }

    render() {
        // Don't show anything until songDetails are loaded
        // Optionally, you can also show a loading screen for better user experience
        if (!this.props.songDetails) return null;

        // Once songDetails are loaded, you can use `this.props.songDetails` to populate your UI
        return (
            <div>{this.props.songDetails}</div>
        )
    }
}

/**
 * 'mapStateToProps' gets a second parameter which contains the props passed directly to the component
 * In this case, react-router will pass route parameters to it.
 * Route parameters will include your named parameter ":number" at "match.params.number".
 * You can pass this parameter into your component, and later pass it into your loading function.
 *
 * "getSongDetails" is a selector function which gets the songDetails from your redux store.
 */
const mapStateToProps = (state, ownProps) => ({
    songId: ownProps.match.params.number,
    songDetails: getSongDetails(state)
});

/**
 * Use 'mapDispatchToProps' to pass your action creator into your component.
 * This action creator will be called with songId when the component loads.
 */
const mapDispatchToProps = (dispatch) => ({
    loadSongDetails: (songId) => dispatch(loadSongDetailsActionCreator(songId))
});

/**
 * Use Redux's "connect" HOC to pass props into your component.
 */
export default connect(mapStateToProps, mapDispatchToProps)(Detail);