Question

我在访问已使用react-router的render方法呈现的有状态组件中的url参数时遇到问题。我已经读过，如果我想将props传递给带有react-router的组件，最好的方法是使用render函数。

这是我的App组件，其中有一个Link和一个Route：

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, Link } from 'react-router-dom';
import StatefulComponent from './StatefulComponent.jsx';

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: null
    };
  }

  render () {
      return (
        <BrowserRouter>
          <div className="react-root">
            <Link to="/someUrl">I'm a link</Link>
            <Route
              path='/:url'
              render={() => <StatefulComponent value={this.state.value}/>}
            />
          </div>
        </BrowserRouter>
      );
   }
}

ReactDOM.render(<App />, document.getElementById('app'));

当用户点击Link时，someUrl应该可以通过道具在StatefulComponent中访问。但是我无法访问有状态组件中的url参数：

import React from 'react';

export default class StatefulComponent extends React.Component {

  constructor(props) {
    super(props);

    console.log('URL PARAMS:', props.match.params);

    this.state = {}
  }

  render () {
    return (
      <div>
        { this.props.value }
      </div>
    )
  }
}

match中的道具没有StatefulComponent属性。

Answer 1

我知道了。在react-router中使用render方法时，您需要将{ match }传递到匿名函数中，该匿名函数将传递到render方法中，然后像正常道具一样将其传递到组件中。见下文：

<Route
  path='/:url'
  render={({ match }) => <StatefulComponent match={match} value={this.state.value}/>}
/>

如何在有状态组件中访问url参数

1 个答案: