this.props.match.params 授权后传入子组件

Posted 2023-02-22

【中文标题】this.props.match.params 授权后传入子组件

【英文标题】：this.props.match.params passed into child component after authorisation

【发布时间】：2019-12-09 06:27:00

【问题描述】：

我最近开始使用带有身份验证的 Firebase 在 React 上构建一个大型项目，但我不太了解 react-router-dom 链接和 React 组件之间的关系。

我正在努力获得

this.props.match.params // which is going to be 2018 / 2019 / 2020... etc

在组件中，呈现为动态路由（如唯一的 post 组件）。

我尝试只使用一个简单的类组件，这可行，但问题是，如果没有身份验证，每个人都可以访问此管理路由，并且每个人都可以在那里编辑和删除数据。我希望它只能由经过身份验证的用户访问。 （管理员）

这就是我的代码的样子：

主要组件：（链接所在）

import React,  Component  from 'react'
import  Link  from 'react-router-dom'

class SeasonBox extends Component 
    render() 
        return (
            <Link className='seasonbox' to=`/adminseason/$this.props.season`>
                <p className='seasonbox__season'>this.props.season/this.props.season+1</p>
            </Link>
        )
    


export default SeasonBox;

以及点击链接后渲染的组件：

import React,  Component  from 'react'
import  Link  from 'react-router-dom'
import  connect  from 'react-redux'
import  compose  from 'recompose'
import  withAuthorisation  from '../Session'
import  withFirebase  from '../Firebase'


const AdminMatchesBox = (authUser) => (
    <div>authUser ? <AdminMatchesBoxAuth /> : <AdminMatchesBoxNonAuth /> </div>
)

class AdminMatchesBoxAuth extends Component 
    render() 
        return (
            <div>
                Hey I am the season this.props.match.params!

                <Link to='/adminmatches'>Wróć</Link>
            </div>
        )
    


const AdminMatchesBoxNonAuth = () => (
    <div>
        <h1>You do not have permission to visit this page.</h1>
    </div>
)

const mapStateToProps = state => (
    authUser: state.sessionState.authUser
);

const condition = authUser => !!authUser


export default compose(withAuthorisation(condition), connect(mapStateToProps),withFirebase)(AdminMatchesBox);

因此，如果我不使用授权，并且仅使用单个类组件，我可以获得 this.props.match.params -> 这是网站的 ID，我需要它来访问数据库中的数据。

但是，我希望它不被未登录的用户看到，我必须通过授权过程来处理它。

我收到一个错误

Cannot read property 'params' of undefined.

我不知道如何将 match.params 传递给 AdminMatchesBoxAuth 组件。

谁能给点建议？

【问题讨论】：

你试过用withRouter包裹组件吗？

【参考方案1】：

通过使用Router 包装，您可以访问参数

试试这个

import  withRouter  from "react-router";
    import React,  Component  from 'react'
    import  Link  from 'react-router-dom'
    import  connect  from 'react-redux'
    import  compose  from 'recompose'
    import  withAuthorisation  from '../Session'
    import  withFirebase  from '../Firebase'


    const AdminMatchesBox = (authUser) => (
        <div>authUser ? <AdminMatchesBoxAuth /> : <AdminMatchesBoxNonAuth /> </div>
    )

    class AdminMatchesBoxAuth extends Component 
        constructor (props)
          super(props)
         
        render() 
            return (
                <div>
                    Hey I am the season this.props.match.params!

                    <Link to='/adminmatches'>Wróć</Link>
                </div>
            )
        
    

    const AdminMatchesBoxNonAuth = () => (
        <div>
            <h1>You do not have permission to visit this page.</h1>
        </div>
    )

    const mapStateToProps = state => (
        authUser: state.sessionState.authUser
    );

    const condition = authUser => !!authUser


    export default compose(withRouter, withAuthorisation(condition), connect(mapStateToProps),withFirebase)(AdminMatchesBox)

【讨论】：

谢谢，有一点进展，但我仍然收到错误消息：我可以访问this.props.match 但不能访问this.props.match.params :( 它返回一个错误，'params' 未定义

你是怎么写路由的？

路由是export const ADMINSEASON = '/adminseason/:id';

在 App.js 中我有 <Route path=ROUTES.ADMINSEASON component=AdminMatchesBox />

让我们continue this discussion in chat。