reactjs - 如何从React Router获取redux操作的id/params？

Question

目前我有一个对象列表页面。我想显示单个对象的详细信息页面(一切都是用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

详细信息.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)

Answer 1

您可以使用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);