无法在按钮单击 React.js 时重定向（使用上下文提供程序）

Question

I'm new to React and I've been trying to redirect to a different component after getting a response from my API.

I've tried using history, location, and Redirect, but the redirect never happens.

Also, I get undefined when using all of the above.

I'm not sure if this is because my App is defined outside the Router , if it is the reason I'm still unable to fix the issue.

Here is my code:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { AppProvider } from './Context'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  <React.StrictMode>
    
    <AppProvider>
      <App />
    </AppProvider>
    
  </React.StrictMode>,
  document.getElementById('root')
);

App.js

import React from 'react';
import './App.css';
import {Home, JoinRoom, CreateRoom, Room } from './pages';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

function App() {

 
 return (
   <div className="App">

     <Router>
       <Switch>
         <Route path="/" exact={true}>
           <Home />
         </Route>
         <Route path="/join">
           <JoinRoom />
         </Route>
         <Route path="/create">
           <CreateRoom />
         </Route>
         <Route path="/room/:roomCode">
           <Room />
         </Route>
       </Switch>
     </Router>    
     
   </div>
 );
}

export default App;

Context.js

Here, in the handleRoomButtonPressed , I'm getting data from the API and trying to redirect.

import React, { useState, useContext } from 'react';
import axios from 'axios';
import { Redirect, useHistory } from "react-router-dom";


const AppContext = React.createContext()

const AppProvider = ({ children }) => {

    // const history = useHistory();

    const [guestCanPause, setGuestCanPause] = useState(true);
    const [votesToSkip, setVotesToSkip] = useState(2);
    const [isHost, setIsHost] = useState(false);


    const handleVotesChange = (e) => {
        e.preventDefault();
        setVotesToSkip(e.target.value);
    }

    const handleGuestCanPauseChange = (e) => {
        e.preventDefault();
        setGuestCanPause(e.target.value)
    }

    const handleRoomButtonPressed = async (props) => {
        const roomData = { guest_can_pause: guestCanPause, votes_to_skip: votesToSkip };
        const response = await axios.post('/api/create-room/', roomData);
        console.log(response.data)
        const redirectUrl = "/room/" + response.data.code;
        console.log(props)
        return <Redirect to={redirectUrl} />
        
    }

    const getRoomDetails = async (roomCode) => {
        axios
      .get("/api/get-room?code=" + roomCode)
      .then((res) => {
        console.log(res.data)
        setVotesToSkip(res.data.votes_to_skip);
        setGuestCanPause(res.data.guest_can_pause);
        setIsHost(res.data.is_host);
      })
      .catch((err) => console.log(err));
    }
    

    return <AppContext.Provider value={{ guestCanPause, 
            votesToSkip, 
            isHost, 
            handleGuestCanPauseChange, 
            handleVotesChange, 
            handleRoomButtonPressed, 
            getRoomDetails, }}>
            {children}
       </AppContext.Provider>
}

export const useGlobalContext = () => {
  return useContext(AppContext)
}
export { AppContext, AppProvider }

The onClick is called in CreateRoom.js

import React, { useState, } from 'react';
import { useGlobalContext } from '../Context'
import { Link } from 'react-router-dom';
import { Button, Grid, Typography, TextField, FormHelperText, FormControl, Radio, RadioGroup, FormControlLabel } from '@material-ui/core'

function CreateRoom() {
    const defaultVotes =  2;
    const { handleGuestCanPauseChange, handleVotesChange, handleRoomButtonPressed } = useGlobalContext();

    return (
        <Grid container spacing={1}>
            <Grid item xs={12} align="center">
                <Typography component="h4" variant="h4">
                    Create A Room
                </Typography>
            </Grid>
            <Grid item xs={12} align="center">
                <FormControl component="fieldset">
                    <FormHelperText>
                        <div align="center">Guest Control of Playback state</div>
                    </FormHelperText>
                    <RadioGroup row defaultValue="true" onChange={handleGuestCanPauseChange}>
                        <FormControlLabel value="true" 
                        control={<Radio color="primary" />}
                        label="Play/Pause" labelPlacemment="bottom" />
                        <FormControlLabel value="false" 
                        control={<Radio color="secondary" />}
                        label="No Control" labelPlacemment="bottom" />
                    </RadioGroup>
                </FormControl>
            </Grid>
            <Grid item xs={12} align="center">
                <FormControl>
                    <TextField required={true}
                    type="number" onChange={handleVotesChange}
                    defaultValue={defaultVotes} 
                    inputProps={{ min: 1,
                        style: { textAlign: "center" },
                        }}
                    />
                    <FormHelperText>
                    <div align="center">Votes Required To Skip Song</div>
                    </FormHelperText>
                </FormControl>
            </Grid>
            <Grid item xs={12} align="center">
            <Button
                color="primary"
                variant="contained"
                onClick={handleRoomButtonPressed}
            >
                Create A Room
            </Button>
            </Grid>
            <Grid item xs={12} align="center">
            <Button color="secondary" variant="contained" to="/" component={Link}>
                Back
            </Button>
            </Grid>
        </Grid>
    )
}

export default CreateRoom

Answer 1

If I understood a subject correctly your AppProvider is located above the router in the component tree. Thus, the react router cannot inject its dependencies into your AppProvider. If you want to access react-router API, such as useHistory hook or others, you should call it from one of the Router children, then it will works.