反应路由器无法读取未定义的位置

Question

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

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

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" query={{title: this.state.title}}>Save</Link>
        </Button>
    );
}
}

这就是我试图在我的其他组件中获取值的方式：

const title = this.props.location.query;

这是我的路由器：

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

因此，为了澄清：我缩短了代码以仅显示重要的内容。在我的 Button 组件中（我为这篇文章选择了名称，它在我的实际代码中具有不同的名称），还有一个可以输入标题的表单。单击按钮时，您将被重定向到 Template_Main。我想在 Template_Main 中显示 title 的值，并想使用查询字符串传递该值。 但是，我在某处犯了一些错误。 一方面，当我在路由器中将:title 添加到path="/Template_Main/:title 时，Template_Main 显示为空白。 进入子路由时，像这样：

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

但是，我被重定向，然后收到错误消息，即无法读取未定义的“位置”。我读到我需要将历史记录传递给<Router>，我尝试过，但也失败了，因为我收到了react-router-dom 中没有属性browserHistory 的错误消息。显然 v4.0.0 中没有这样的东西，所以我尝试使用npm install react-router@x.x.x 降级到 3.0.0，然后降级到 2.0.0，但是，我仍然收到相同的错误消息。

我已经研究了几个小时了，现在我不确定该怎么做。

我是否在我的代码或我尝试解决问题的方式中犯了任何错误（我试图尽可能清楚地描述我的行动方案），你们对如何解决它有任何想法吗？

Answer 1

location.query 似乎已在 React 路由器 v4 中停止使用。您可以尝试使用 location.search、props.location.pathname 或 props.match.params。

这里有一个github issue 解决同样的问题。

这是一个代码示例：

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} />

希望对你有帮助。

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