Question

我在React中使用一个简单的路由器

  <Router>
    <div>                   
       <Switch>
         <Route path="/" component={ Home } exact /> 
         <Route path="/contact" component={ Contact } />   
         <Route path="/:slug" component={ Post } />                       
        </Switch> 
    </div>
  </Router>

我正在使用REST从博客中提取帖子，并且有一个名为Post的路由器组件用于单个博客帖子。与home或contact不匹配的任何路由都使用post组件。

如何在Post组件中获取或传递路由段/ url段？例如，如果url段/段是/some-blog-post-title，我想检索它，最好使用React Router函数/方法（如果存在）。

Answer 1

您可以在props.match.params对象中获取参数。要获取:slug参数，您可以编写props.match.params.slug。

示例

class Post extends React.Component {
  componentDidMount() {
    this.getPost(this.props.match.params.slug);
  }

  componentDidUpdate(prevProps) {
    if (prevProps.match.params.slug !== this.props.match.params.slug) {
      this.getPost(this.props.match.params.slug);
    }
  }

  getPost = slug => {
    // ...
  };

  render() {
    return <h2>{this.props.match.params.slug}</h2>;
  }
}

Answer 2

如果你想在一个功能组件中抓取网址

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import User from './User';
class App extends Component {
    render() {
        return (
            <Router>
                <Switch>
                    <Route exact path='/user/:userName' component={User} />
                    <Route>
                        <div>Default page</div>
                    </Route>
                </Switch>
            </Router>
        );
    }
}
export default App;

在功能组件里面你可以抓住它

import React from 'react';
import { useParams } from 'react-router-dom';
const User = () => {
    const { userName } = useParams();
    return (
        <div>Username: { userName }</div>
    );
}
export default User;

在组件中反应路由器抓取URL段

2 个答案: