Question

我正在开发一个redux项目，我有一个帖子列表（比如Blog Post），每个帖子都有一个唯一的id。另外，我有一个不同的组件显示特定帖子的详细信息（我已将其命名为Post_Detail组件）。所以我想要做的是当我点击帖子列表中的特定帖子时，我想导航到显示该特定帖子详细信息的页面。

我的操作创建者用于显示所选帖子：

//Action Creator for displaying a selected post
export function fetchPost(id) {
    const request = axios.get(`${API}/posts/${id}`,{headers});

    return dispatch => {
      return request.then(({data}) => {
        console.log(data);
        dispatch({
        type: FETCH_POST,
        payload: data
        })
      })
    }
}

用于显示所选帖子的我的Post_Detail组件是：

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchPost, deletePost } from '../actions/posts_action';

class PostDetail extends Component {
    componentDidMount() {
        const  { id } = this.props.match.params;
        this.props.fetchPost(id);
        console.log(id)
    }

    //Function for deleting on click using action creator
    onDeleteClick() {
      const { id } = this.props.match.params;
      this.props.deletePost(id, () => {
        this.props.history.push('/');
      });
    }

    render() {
      const { post } = this.props;

      if (!post) {
        return <div>Loading...</div>
      }

      return(
        <div>
          <div>
            <h3>{post.title}</h3>
            <h6>Categories: {post.category}</h6>
            <p>{post.body}</p>
          </div>
          <button
            className="btn btn-danger pull-xs-right"
            onClick={this.onDeleteClick.bind(this)} >
            Delete Post
          </button>
        </div>
      );
    }
}

function mapStateToProps({ posts }, ownProps) {
    return { post: posts[ownProps.match.params.id] };
}

export default connect(mapStateToProps, { fetchPost, deletePost })(PostDetail);

我列出所有可用帖子的主页是：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route } from 'react-router-dom';
import thunk from 'redux-thunk';
import './index.css';
import App from './App';
import reducers from './reducers/index.js'
import Posts from './components/posts_index';
import CreatePost from './components/new_post';
import PostDetail from './components/post_detail';
import CategoryView from './components/category';
import { compose } from 'redux';
import { Link } from 'react-router-dom';

//const createStoreWithMiddleware = createStore(reducers,applyMiddleware(thunk));

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 const createStoreWithMiddleware = createStore(reducers, composeEnhancers(applyMiddleware(thunk)));

ReactDOM.render(
  <Provider store={createStoreWithMiddleware}>
      <BrowserRouter>
        <div>
          <Route  path="/new" component={CreatePost} />
          <Route path="/posts/:id" component={PostDetail} />
          <Route exact  path="/" component={Posts} />
          <Route path="/:category/posts" component={CategoryView} />
        </div>
      </BrowserRouter>
  </Provider>  , document.getElementById('root'));

所以，现在发生的事情是，如果我尝试使用网址中的该帖子的“id”导航到帖子，例如： http://localhost:3000/posts/8xf0y6ziyjabvozdd253nd 其中“8xf0y6ziyjabvozdd253nd”是id在那篇文章中，我可以导航到Post_Detail组件并查看该帖子的详细信息。但是，当从主页中的帖子列表中点击帖子时，我无法弄清楚如何导航到Post_Detail组件。我知道我应该使用'react-router-dom'中的“链接”并导航到传递链接的“到”属性中的网址的页面，但我不知道如何动态更改链接中的ID。谁能指导我如何继续？

如何使用redux中的axios库导航到具有不同“id”属性的URL

0 个答案: