Question

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

**应用程序组件

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>
    );
 }
}

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

Answer 1

match道具仅可用于路线的组成部分：

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

如果需要在App上使用它，则需要为App创建一条路由。

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

当然，它不应该有匹配对象匹配对象包含有关如何匹配URL的信息。从

访问匹配对象的方式

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

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

`withRouter` as this.props.match

Answer 4

在未路由的组件中，您应该使用：

import { useParams, useHistory } from 'react-router-dom'

const history = useHistory()

const { keyword, id, whateverTheParamIs } = useParams()

反应组件道具不匹配

4 个答案: