使用 REACT 获取路径 URL

Question

当我使用 React 时，我尝试从我的页面获取当前路径。我的想法是为每个页面创建规则，因为我的应用程序需要这个。

在第一个示例中，我创建了一个内联组件并且工作正常！

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";

const testLink = ({match}) => {
    console.log(match.url)
    return (<h1>Teste {match.params.username} </h1>)
}

class Sponnsor extends Component {
    render() {
        return (
            <Router>
              <Route path="/test/:username" component={testLink} />
            </Router>
            

        );
    }
}

我有一个正确的路径！ (样本: /test/john)

但是，我怎么没有这样使用，我无法理解如何在真实组件中重现 {match}，如下所示：

import React, { Component } from 'react';

class CustomComponent extends Component {
    render() {
        return (
            RESULT OF MY PATH
        );
    }
}

export default CustomComponent;

我想，仍在读取当前路径，在获得此信息后，我将使用我的代码创建一些条件。

例如： localhost:3000/test/username - 路径应该是：test/username

Answer 1

match 属性仅传递给直接在 <Route /> 中指定的组件，因此 TestLink 的子组件必须显式地指定 match 属性。

<Route path="/test/:username" component={TestLink} />

const TestLink = ({match}) => {
    console.log(match.url);
    // pass the `match` prop to `CustomComponent`
    return <CustomComponent match={match} />;
}

使用 REACT 获取路径 URL

Get Path URL with REACT

javascript

reactjs

react-component