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>，我尝试了这个记录，但由于我收到browserHistory中没有属性react-router-dom的错误消息，因此也失败了。显然在v4.0.0中没有这样的东西，所以我尝试使用npm install react-router@x.x.x降级到3.0.0然后降级到2.0.0，但是，我仍然收到相同的错误消息。

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

我是否犯过任何错误，无论是在我的代码中还是在我试图解决问题的方式上（我尽可能清楚地描述了我的行动方案）你是否有任何想法如何解决？< / p>

Answer 1

在React router v4中似乎已停止使用location.query。您可以尝试使用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：我还没弄明白如何使用这种方法传递多个参数。如果我弄明白，我将来会更新这个答案。

react-router无法读取undefined的位置

1 个答案: