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.

What ***specific*** versions of `react` and `react-router-dom` are installed? You can check by running `npm list react react-router-dom` in the terminal at the project's root directory. If using `react-router-dom@5.2.x` and `react@18` *and* rendering the app into a `React.StrictMode` component does this help answer your question? https://stackoverflow.com/a/71833424/8690857 — Drew Reese, Oct 10 '22 at 04:25
Did you check your browser console? is there any error there? — PakDragoon, Oct 10 '22 at 04:26
@DrewReese frontend@0.1.0 /Users/anirudhsathiya/Desktop/video-streaming/frontend ├─┬ react-router-dom@5.3.3 │ ├─┬ react-router@5.3.3 │ │ ├─┬ mini-create-react-context@0.4.1 │ │ │ └── react@18.2.0 deduped **invalid: "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0" from node_modules/react-router/node_modules/mini-create-react-context** This is the output of npm list. I'm little new to react. How can I fix the invalid error? — Anirudh s, Oct 10 '22 at 04:30
@SujithSandeep import './App.css'; import styled from 'styled-components'; import React, { useState, useEffect } from "react"; import Axios from "axios"; import Footer from "./components/footer" import img from "./media/goldengate.jpeg"; import jwt_decode from "jwt-decode"; import { Route, BrowserRouter as Router, Switch } from "react-router-dom"; import Home from './components/Home'; import Player from './components/Player'; — Anirudh s, Oct 10 '22 at 04:38
Okay... Check whether you have imported your `App.js` properly in your `index.js` file... — Sujith Sandeep, Oct 10 '22 at 04:45
Or else edit and add your `index.js` and complete `app.js` file in your question itself... — Sujith Sandeep, Oct 10 '22 at 04:46
@SujithSandeep added index.js in the post. Let me know if you want to see app.js too — Anirudh s, Oct 10 '22 at 04:53
Ok, looks like you've actually RRDv5.3.3 installed, which is ok with Reactv18. When, or where, is the `this.state.videos` state in `Home` ever populated? Is this the complete code? Can you share a [mcve] for all relevant code you are using? — Drew Reese, Oct 10 '22 at 05:06

Drew Reese · Answer 1 · 2022-10-10T05:18:19.130

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';

React Router isn't rendering component

1 Answers1