Q:

Unable to console.log props using Link

I am trying to make a single web application. Basically, I am trying to use the ReactRouter to display what is passed as a Route Parameter. However, I am unable to do that. To check if somethings wrong, I decided to console.log out this.props.match, still nothing shows up. Could someone explain what the problem is? And a possible get around?
My code is-
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>)
    }
}

The App.js file:
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;

A:

I just ran your code on my end, it looks like the problem is using /:post-id. I changed that to /:pid and it worked. I got the below object when I console log this.props.match
{
  "path":"/:pid",
  "url":"/1",
  "isExact":true,
  "params":
    {
      "pid":"1"
    }
  }

I hope this helps.

