Javascript 无法使用react路由器访问URL路径组件

我在App.js中这样做：

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

我尝试过很多其他方法，比如：

alert（this.match）或
警报（匹配）。它们都没有定义

我做错了什么？据我所知，我正在跟踪文件

我正在运行React版本16.3.2

编辑：
所有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;

import React，{Component}来自'React'；
导入“./styles/app.css”；
从'react router dom'导入{Route}；
从“./欢迎”导入欢迎；
从“./Discover”导入发现；
从“/我的搜索”导入我的搜索；
从“./Login”导入登录名；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
//从“./数据库”导入数据库；
类应用程序扩展组件{
建造师（道具）{
超级（道具）
此.state={
标题：“”，
}
}
render（）{
返回(
{/*  */}
{/*  */}
);
}
}
导出默认应用程序；

所有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;

从“React”导入React；
从“./Map”导入映射；
从“./Search”导入搜索；
从“/”导入情感容器；
从“intro.js react”导入{Steps}；
从“../components/button important”导入按钮重要性；
从“../model/model”导入{modelInstance}；
从“../components/intro绘图动画”导入绘图动画
导入“intro.js/introjs.css”；
导入“../styles/discover.css”；
导入“../styles/search.css”；
类DiscoverContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
状态：“初始”，
//简介.js
初始步骤：0，
introState:'首字母'，
步骤：[
{
元素：“.情感派”，
简介：“该应用程序显示了人们对推特主题的情感。
”，
},
{
元素：“#searchInput”，
简介：“你可以在这里搜索主题”，
},
{
元素：'.date'，
简介：“你可以在过去7天内查找推文”，
},
{
元素：'.location'，
简介：“键入地名或与地图交互以在特定位置查找推文”，
},
{
元素：“.情绪推特”，
简介：“推文将显示在这里”，
},
{
元素：'.createPDF'，
简介：'最后你可以导出PDF格式的数据'，
},
],
}
}
componentDidMount（）{
控制台日志（“道具：”）；
console.log（this.props.locationl）；//未定义
}
handleStatusChange=newStatus=>{
这是我的国家({
状态：newStatus
});
}
onExit=（）=>{
此.setState（（）=>({
stepsEnabled:false，
内部状态：“初始”
}));
};
切换步骤=（）=>{
this.setState（prevState=>（{stepsEnabled:！prevState.stepsEnabled}））；
//这是一个变更后的状态（prevState）；
};
onAfterChange=nextStepIndex=>{
if（nextStepIndex==0&&this.state.status！==LOADED'）{
这是我的国家({
状态：“已加载”
})
//this.step.updatesteppelement（nextStepIndex）；
}
else if（nextStepIndex==3）{
这是我的国家({
简介：“地图”
})
//this.step.updatesteppelement（nextStepIndex）；
}
否则{
这是我的国家({
内部状态：“初始”
})
}
}
渲染（）{
const{stepsEnabled，steps，initialStep}=this.state；
让media=null；
开关（this.state.introState）{
案例“首字母”：
媒体=空
打破
案例“地图”：
媒体=
打破
}
返回(
{media}
);
}
}
导出默认发现容器；
您需要使用HOC访问
匹配
道具：

export default withRouter(DiscoverContainer);


你使用的是哪个版本的react路由器？可能是@AkhilP的副本，来自我的package.json:
“react router dom”：“^4.2.2”
LokiSinclair，如果我使用
console.log（this.props.location）
（他说会有参数或包含参数的东西），我也会得到
未定义的
，你能显示你所有的代码吗？
export default withRouter(DiscoverContainer);

console.log(this.props.match);