React Router isn't rendering component

Question

I'm using react router v5.2.0 and my code doesn't render anything. Would really appreciate some help. No errors are being shown.

Index.js file

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
   </React.StrictMode>
);

App.js

  <Router>
        <Switch>
        <Route exact path="/" component={Home}></Route>
        <Route path="/player/:id" component={Player}></Route>
        </Switch>
    </Router>

Home.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Home extends Component {
    constructor() {
        super();
        this.state = {
            videos: []
        };
    }
    
    render() {
        return (
            <div className="App App-header">
                <div className="container">
                    <div className="row">
                        {this.state.videos.map(video => 
                        
                        <div className="col-md-4" key={video.id}>
                            <Link to={`/player/${video.id}`}>
                                <div className="card border-0">
                                    <img src={`http://localhost:4000${video.poster}`} alt={video.name} />
                                    <div className="card-body">
                                        <p>{video.name}</p>
                                        <p>{video.duration}</p>
                                    </div>
                                </div>
                            </Link>
                        </div>
                        )}
                    </div>
                </div>
            </div>
        )
    }
}

Let me know if you need any other details . Please let me know where the error might be.

Answer 1

Actually, the issue it seems is with the mini-create-react-context package, it's deprecated and isn't compatible with React 18. See source.

"peerDependencies": {
  "prop-types": "^15.0.0",
  "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0"
},

This package appears to only exist to polyfill ("ponyfill") the React Context API, which to be honest isn't something I believe ever needed to be polyfilled. If you aren't using it (and I don't suspect you need it) then remove it from your project's dependencies.

Run: npm uninstall -s mini-create-react-context

This will remove the dependency and update your package.json file.

Search your code for any mini-create-react-context imports

import createReactContext from 'mini-create-react-context';

and replace them with vanilla React createContext

import { createContext } from 'react';