0

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

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

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

4

1 回答 1

0

matchprop 仅传递给 中直接指定的组件，因此必须显式地为<Route />子组件提供prop。TestLinkmatch

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

const TestLink = ({match}) => {
    console.log(match.url);
    // pass the `match` prop to `CustomComponent`
    return <CustomComponent match={match} />;
}
于 2018-04-23T15:02:05.123 回答