TypeError: undefined is not an object (評估 'this.props.history.push')

Question

我面臨一個問題，我的this.props返回{} ，它是空的。 但它應該是一個房間代碼。

RoomJoinPage.js

import React, { Component } from  'react';
import HomePage from './HomePage';
import 
{ 
    Button, 
    Grid, 
    Typography, 
    TextField,
    FormHelperText,
    FormControl,
    Radio,
    RadioGroup,
    FormControlLabel
} from '@mui/material';
import { Link } from 'react-router-dom';

export default class RoomJoinPage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            roomCode: "",
            error: "",
        };
        this._handleTextFieldChange = this._handleTextFieldChange.bind(this);
        this.roomButtonPress = this.roomButtonPress.bind(this);
    }
    render() {
        return (
            <Grid container spacing={ 1 }>
                
                <Grid item xs={12} align="center" >
                    <Typography variant='h4' component="h4">
                        Join a Room
                    </Typography>
                </Grid>
                <Grid item xs={12} align="center">
                    <TextField 
                    error= {this.state.error}
                    label="Code"
                    placeholder="Enter a room code"
                    value= {this.state.roomCode}
                    helperText= {this.state.error}
                    variant="outlined"
                    onChange={this._handleTextFieldChange}
                    />
                </Grid>

                <Grid
                container
                spacing={1}
                style={{width: "100", padding: 10}}
                direction="column"
                alignItems="center"
                justifyContent="center"
                alignContent="center"
                >
                
                    <Grid item  xs={12}>
                        <Button variant='contained' color='secondary' onClick={this.roomButtonPress}>Enter room</Button>
                    </Grid>
                    <Grid item xs={12}>
                        <Button variant='contained' color='primary' to='/' component={Link}>Back</Button>
                    </Grid>
                </Grid>
            </Grid>
        );
    }
    _handleTextFieldChange(e) {
        this.setState({
            roomCode: e.target.value,
        });
    }

    roomButtonPress(e) {
        const requestOptions = {
            method: "POST",
            headers: {"Content-Type": "application/json" },
            body: JSON.stringify({
                code: this.state.roomCode
            })
        };
        console.log(this.props)
        fetch('/api/join-room', requestOptions)
        .then((response) => {
            if (response.ok) {
                this.props.history.push(`/room/${this.state.roomCode}`)
            }
            else {
                this.setState({error: "Room not found."})
            }
        })
        .catch((error) => {
            console.log(error); 
        });
    }
}

問題應該出在roomButtonPress函數中。 我是新手，如何將this.props傳遞給該函數？

預期的結果是，當我單擊帶有正確房間代碼（連接到 Django 后端）的Enter Room按鈕時，它應該重定向到房間頁面/room/roomCode

我在HomePage.js中使用RoomJoinPage

import React, { Component } from  'react';
import RoomJoinPage from './RoomJoinPage';
import CreateRoomPage from './CreateRoomPage';
import Room from './Room';
import { BrowserRouter as Router, Routes, Route, Link, Redirect } from 'react-router-dom';

export default class HomePage extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
         <Router>
            <Routes>
                <Route exact path='/' element={<p> <h1>This is the home page</h1>
                    <a href='./join'> Link to room join page </a>
                    <br/><a href='./create'> Link to room create page </a>
                    <br/><a href='./api/home'> API? </a>
                    </p>}></Route>
                <Route exact path='/join' element={<RoomJoinPage></RoomJoinPage>}></Route>
                <Route exact path='/create' element={<CreateRoomPage></CreateRoomPage>}></Route>
                <Route exact path='/room/:roomCode' element={<Room></Room>}></Route>
            </Routes>
         </Router>   
        );
    }
}

Answer 1

看起來你還沒有在頁面中集成 React Router。

在RoomJoinPage.js中嘗試這些更改

包括withRouter

import { withRouter } from "react-router";

改變

 export default class RoomJoinPage extends Component {

至

 class RoomJoinPage extends Component {

頁面結束，用withRouter導出組件

 const NewRoomJoinPage = withRouter(RoomJoinPage);
 export default NewRoomJoinPage;