ReactRouter不会将路径参数传递给组件

Question

我在版本4.1.2中使用react-router-dom。

我创建了这个路由器结构和这个组件：

＆＃13;

＆＃13;

class ConversationPane extends React.Component {
  render() {
    console.log(this.props)
    return (
       <div id="conversation-pane">
    <h1>Conversation Pane</h1>
    <h3>{this.props}</h3>
             </div>
     )
  }
}

ReactDOM.render(
  <BrowserRouter history={browserHistory}>
      <Switch>
        <Route path="/" component={App}>
          <Route path="/conversation/:id" component={ConversationPane} />
        </Route>
      </Switch>
  </BrowserRouter>
  , document.getElementById('main'))

＆＃13;

<!-- begin snippet: js hide: false console: true babel: false -->

＆＃13;

＆＃13;

＆＃13;

此参数：id从不在ConversationPane中包含值。 this.props总是{}。

在URL中，值是RamiSayar，但在控制台中没有this.props的值。

我不明白发生了什么。

拜托，有人可以帮我吗？它似乎并不难，但我真的尝试过，并没有找到解决方案。

Answer 1

也许尝试使用withRouter？

import { withRouter } from 'react-router';

class ConversationPane extends React.Component {
  render() {
    console.log(this.props)
    return (
       <div id="conversation-pane">
    <h1>Conversation Pane</h1>
    <h3>{this.props}</h3>
             </div>
     )
  }
}

const ConversationPaneWithRouter = withRouter(ConversationPane);

ReactDOM.render(
  <BrowserRouter history={browserHistory}>
      <Switch>
        <Route path="/" component={App}>
          <Route path="/conversation/:id" component={ConversationPaneWithRouter} />
        </Route>
      </Switch>
  </BrowserRouter>
  , document.getElementById('main'))

Answer 2

尝试使用'this.match.params'访问参数。 （'this.match.params.id'代表您设置的ID）

Answer 3

问题在于嵌套路由。它在v4中不起作用。

嵌套路由必须位于其上方的Component内。因此，ConversationPane的路径必须位于App Component内。

正确的方法如下：

class App extends React.Component {
  render() {
    return (
      <Route path="/conversation/:id" component="ConversationPane" />
    )
  }
}

class ConversationPane extends React.Component {
  render() {
    console.log(this.props.match.params.id)
    return (
       <div id="conversation-pane">
    <h1>Conversation Pane</h1>
    <h3>{this.props.match.params.id}</h3>
             </div>
     )
  }
}

ReactDOM.render(
  <BrowserRouter history={browserHistory}>
    <Route path="/" component={App}></Route>
  </BrowserRouter>
  , document.getElementById('main'))