反应组件道具没有匹配

Question

我正在我的react项目中使用react路由dom V5。我需要通过受保护的路由将道具从应用程序组件（我在其中导入路由器）传递到子组件。问题是道具是空的，没有匹配、位置和历史记录。。

**应用组件

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

class App extends Component {
  render(){
    console.log(this.props); //props does not have match propreties
    return (
    <div className="App">
        <Router>
          <React.Fragment>
            <Switch>
             <ProtectedRoute path='/exemple' component={Exemple}/>
             </Switch>
          </React.Fragment>
        </Router>
    );
 }
}

注意：我将道具从应用程序传递到需要使用this.props.match的子组件，但match未定义

Answer 1

当然，它不应该有match对象match对象包含关于如何匹配URL的信息。从中访问匹配对象的方法

Route component as this.props.match
Route render as `({ match }) => ()`

Route children as ({ match }) => ()

`withRouter` as this.props.match

Answer 2

试试这个

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

class App extends Component {
  render(){
    console.log(this.props); //props does not have match propreties
    return (
    <div className="App">
        <Router>
          <React.Fragment>
            <Switch>
<Route
  path='/dashboard'
  render={(props) => <Dashboard {...props} isAuthed={true} />}
/>
             </Switch>
          </React.Fragment>
        </Router>
    );
 }
}

Answer 3

match道具仅对路线的组件可用：

<Route exact path="/foo" component={({ match }) => console.log(match)} />

若你们在应用程序上需要它，你们需要为应用程序创建一个路由。