React-router-dom и Redux не переопределили компонент

Question

РЕДАКТИРОВАТЬ: я нашел решение, я забыл switch компонент в моем routes.js

Я создал такой маршрут: /post/:id

мой routes.js похож:

import React, { Component } from "react";
import { BrowserRouter, Route } from "react-router-dom";
import Posts from "./components/Posts";
import Post from "./components/Post";
class Routes extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Route exact path="/" component={Posts} />
            <Route path="/post/:id" component={Post} />
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default Routes;

На моем маршруте / я перечислил все свои posts, и когда я нажимаю на один из них, я обновляю URL, например, http://localhost:3000/post/1.

PS: я пытался использовать функцию withRouter, как сказано в официальном документе о реакции маршрутизатора, но в моем случае этот случай не работает.

рассматриваемый файл post.js выглядит так:

import React, { Component } from "react";
import { active_post } from "../actions/index";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

class Post extends Component {
  componentWillMount() {
    this.props.active_post(this.props.match.params.id);
  }
  render() {
    console.log(this.props.post);
    return (
      <div>
        <h1>Detail d'un post</h1>
        <p>{this.props.match.params.id}</p>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    post: state.activePost
  };
}
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ active_post }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Post);

Так, например, если я введу вручную в строке URL http://localhost:3000/post/3, например, у меня есть компонент и console.log() с сообщением, когда мне нужно.

Так что, пожалуйста, если у вас есть решение для этого случая, я возьму это.Спасибо тебе :)

Answer 1

Вы должны попытаться добавить Switch отact-router-dom вокруг ваших маршрутов.

<BrowserRouter>
    <div>
        <Switch>
            <Route exact path="/" component={Posts} />
            <Route path="/post/:id" component={Post} />
        </Switch>
    </div>
</BrowserRouter>

Не забудьте включить в ваш компонент модуль Switch из response-router-dom.

import { Route, Switch } from 'react-router-dom';