Невозможно использовать console.log с помощью Link

Question

Я пытаюсь сделать одно веб-приложение. По сути, я пытаюсь использовать ReactRouter для отображения того, что передается в качестве параметра маршрута. Однако я не могу этого сделать. Чтобы проверить, если что-то не так, я решил console.log out this.props.match, но ничего не появляется. Может кто-нибудь объяснить, в чем проблема? И можно ли обойтись?

Мой код -

import React from 'react';

export default class Post extends React.Component {


    state = {
        id: null
    }

    componentDidMount(props) {
        console.log(this.props.match);
    }

    render = () => {
        return (<div>Hello WOrld</div>)
    }
}

Приложение. js Файл:

import React, { Fragment, Component } from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Contact from './components/Contact';
import About from './components/About'
import Post from './components/Post';
import { BrowserRouter, Route } from 'react-router-dom';



class App extends Component {
  render = () => {
    return (

      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Route exact path="/" component={Home} />
          <Route path="/contact" component={Contact} />
          <Route path="/about" component={About} />
          <Route path="/:post-id" component = {Post} />
        </div>
      </BrowserRouter>

    );
  }
}

export default App;

Answer 1

Я только что запустил ваш код, похоже, проблема в том, что используется /:post-id. Я изменил это на /:pid, и это сработало. Я получил объект ниже, когда у меня консольный журнал this.props.match

{
  "path":"/:pid",
  "url":"/1",
  "isExact":true,
  "params":
    {
      "pid":"1"
    }
  }

Надеюсь, это поможет.

Answer 2

Вы должны загрузить компонент с маршрутизатором

Попробуйте это

import { withRouter } from 'react-router-dom';

class Post extends React.Component {


    state = {
        id: null
    }

    componentDidMount(props) {
        console.log(this.props.match);
    }

    render = () => {
        return (<div>Hello WOrld</div>)
    }
}

export default withRouter(Post);