Cannot access URL path components with react-router

Question

I'm doing this in App.js:

        <Route path="/discover/:query" component={Discover}/>

Then I'm trying to access the URL parameters in Discover :

componentDidMount() {
  alert(this.props.match); // undefined
}

I've tried many other ways, like: alert(this.match); or alert(match); . They are all undefined!

What am I doing wrong? I'm following the docs as far as I can tell.

I'm running React version 16.3.2.

EDIT: All of App.js:

import React, { Component } from 'react';
import './styles/app.css';
import { Route } from 'react-router-dom';
import Welcome from './welcome';
import Discover from './discover';
import MySearches from './my-searches';
import Login from './login';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
// import Database from './database';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      title: '',
    }
  }

  render() {
    return (
        <div className="App">
          <header className="App-header">
            {/* <Route path="/" component={Login}/> */}
            <Route exact path="/" component={Welcome}/>
            <Route path="/discover/:query" component={Discover}/>
            <Route path="/my-searches" component={MySearches}/>
            {/* <Route path="/database" component={Database}/> */}
          </header>
        </div>
    );
  }
}

export default App;

All of discover.js:

import React from 'react';
import Map from './map';
import Search from './search';
import SentimentContainer from './sentiment';
import { Steps } from 'intro.js-react';
import ButtonImportant from '../components/button-important';
import { modelInstance } from '../model/model';
import DrawingAnimation from '../components/intro-drawing-animation'


import 'intro.js/introjs.css';
import '../styles/discover.css';
import '../styles/search.css';


class DiscoverContainer extends React.Component {
    constructor(props){
        super(props);

        this.state = {
            status: 'INITIAL',

            //Intro.js
            initialStep: 0,
            introState: 'INITIAL',
            steps: [
              {
                element: '.sentiment-pie',
                intro: "This app shows people's sentiment towards subjects based on tweets.</br> <h5><ButtonImportant><a target='_blank' href='https://en.wikipedia.org/wiki/Sentiment_analysis'>What is Sentiment Analysis?</a></ButtonImportant></h5> ",
              },
              {
                element: '#searchInput',
                intro: 'You can search for subjects here',
              },
              {
                element: '.date',
                intro: 'You can look for tweets in the past 7 days',
              },
              {
                element: '.location',
                intro: 'Type in place names or interact with the map to look for tweets in specific locations',
              },
              {
                element: '.sentiment-tweet',
                intro: 'The tweets will be displayed here',
              },
              {
                element: '.createPDF',
                intro: 'Finally you can export the data in a PDF',
              },
            ],
        }
    }

    componentDidMount() {
      console.log("props:");
      console.log(this.props.locationl); // undefined
    }

    handleStatusChange = newStatus => {
      this.setState({
          status: newStatus
      });
    }

    onExit = () => {
      this.setState(() => ({
        stepsEnabled: false,
        introState: 'INITIAL'
      }));
    };

    toggleSteps = () => {
      this.setState(prevState => ({ stepsEnabled: !prevState.stepsEnabled }));
      // this.onAfterChange(prevState);
    };

    onAfterChange = nextStepIndex => {
      if (nextStepIndex === 0 && this.state.status !=='LOADED') {
        this.setState({
          status: 'LOADED'
        })
        // this.step.updateStepElement(nextStepIndex);
      }

      else if (nextStepIndex === 3) {
        this.setState({
          introState: 'MAP'
        })
        // this.step.updateStepElement(nextStepIndex);
      }

      else{
        this.setState({
          introState: 'INITIAL'
        })
      }
      }



    render () {
      const { stepsEnabled, steps, initialStep} = this.state;

      let media = null;

      switch (this.state.introState) {
        case 'INITIAL':
            media = null
            break;

        case 'MAP':
            media = <DrawingAnimation />
          break;
      }

        return (
            <div className="container-discover">
              <Steps
                className='intro-steps'
                enabled={stepsEnabled}
                steps={steps}
                initialStep={initialStep}
                onExit={this.onExit}
                onAfterChange={this.onAfterChange}
              />
              <div className="container-discover-top">
                  <div className='map'>
                    <Map/>
                  </div>
                  <div className="intro">
                      {media}
                      <ButtonImportant size="small" text='Explain App' toggleSteps={this.toggleSteps.bind(this)}/>
                  </div>
                  <div className='container-search'>
                    <Search handleStatusChange={this.handleStatusChange}/>
                  </div>
              </div>
              <div className="container-discover-bottom">
                  <SentimentContainer status={this.state.status}/>
              </div>
            </div>

        );
    }
}

export default DiscoverContainer;

Answer 1

You need to use the withRouter HOC to access the match props:

export default withRouter(DiscoverContainer);

...

console.log(this.props.match);