Reactjs react路由器无法读取未定义的位置

我试图使用查询字符串将一些值从一个组件传递到另一个组件

这是我从中传递值的组件（缩写）：

这是我的路由器：

import React from 'react'
import {
    BrowserRouter as Router,
    Route,
    browserHistory
} from 'react-router-dom';
import Home from './Main';
import TimelineTemplate from './Template_Main';


const App = () => 
    <Router history={browserHistory}>
        <div>
        <Route exact path="/" component={Home}/>
        <Route path="/Template_Main/:title" component={TimelineTemplate} />
        </Route>
       </div>
    </Router>

export default App

但是，我被重定向，然后我收到错误消息，未定义的“位置”无法读取。我读到我需要将历史记录传递给

，我尝试了，但也失败了，因为我收到了错误消息，即

react router dom

中没有属性

browserHistory

。显然在v4.0.0中没有这样的东西，所以我尝试使用

npm install react降级到3.0.0，然后再降级到2.0.0-router@x.x.x

，但是，我仍然收到相同的错误消息

我已经研究了几个小时了，现在我真的不知道该怎么办

---

我有没有犯过任何错误，无论是在我的代码中，还是在我试图解决问题的方式中（我试图尽可能清楚地描述我的行动过程），你们有没有关于如何解决它的想法？

location.query在React router v4中似乎已经停止。您可以尝试location.search、props.location.pathname或props.match.params

这里有一个相同问题的解决方案

下面是一个代码示例：

export class Button extends React.Component {

constructor(props) {
    super(props);
    this.state = {title : "some title"};
}
render() {
    return(
        <Button type="submit" color="primary">
             <Link to={"/Template_Main/"+this.state.title}>Save</Link>
        </Button>
    );
}
}

导出类按钮扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={title:“some title”}；
}
render（）{
返回(
拯救
);
}
}

以及子组件：

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

class Child extends React.Component {
   render(){
      return <div>{this.props.match.params.title}</div>
   }
}

export default withRouter(Child);

从“react router dom”导入{withRouter}；
子类扩展了React.Component{
render（）{
返回{this.props.match.params.title}
}
}
使用路由器导出默认值（子级）；

路由器定义应如下所示：

<Route path="/Template_Main/:title" component={TimelineTemplate} />

希望能有帮助

---

PS：我还没有弄明白如何使用这种方法传递多个参数。如果我弄明白了，以后我会更新这个答案。

非常感谢您的回复！我修改了自己的代码，并按照您建议的方式进行了更改，但是，我仍然不确定如何在我的子组件中引用标题，我想在哪里显示标题。我使用了{this.props.match.params.title}，但它不起作用，也没有返回任何内容。你对怎么做有什么建议吗？好的。刚刚注意到你的路线定义。似乎有一个小的语法错误。我会用正确的语法更新我的答案。哦，我也传递了多个参数来做这件事：

Save

不知道这是否是正确的方法，但它对我有效。好的，我用这个答案找到了答案（如果有人遇到这个问题，很难解决。）@Raksheet Bhat非常感谢你的帮助！

export class Button extends React.Component {

constructor(props) {
    super(props);
    this.state = {title : "some title"};
}
render() {
    return(
        <Button type="submit" color="primary">
             <Link to={"/Template_Main/"+this.state.title}>Save</Link>
        </Button>
    );
}
}

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

class Child extends React.Component {
   render(){
      return <div>{this.props.match.params.title}</div>
   }
}

export default withRouter(Child);

<Route path="/Template_Main/:title" component={TimelineTemplate} />