Develop Reference

Warning: Failed prop type: The prop `history` is marked as required in `Router`, but its value is `undefined`

So I'm a beginner in react, and I'm racking my brain to try to solve the error and still I'm not getting it... I've already messed with this code below, to try to fix it and nothing... if anyone can help I'd appreciate it.
Index.js:
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
App.js
import React from 'react';
import { Router, useHistory } from 'react-router-dom';
import GlobalStyle from './styles/GlobalStyles';
import Header from './components/Header';
import Rotas from './routes';
export default function App() {
const history = useHistory();
return (
<Router history={history}>
<Header />
<Rotas />
<GlobalStyle />
</Router>
);
}

My App Component will not render with React

I am doing React project with typescript form scratch, and for some reason, I can't get the App component to render. I know the file path is correct. The Error says: Module not found: Error: Can't resolve './App' in '/Users/michaelhorvilleur/Desktop/Codecademy/react-porfolio/src'
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("#root"));
import React, { useState } from "react";
const App = () => {
return (
<div>
<h1>App</h1>
</div>
);
};
export default App;

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);

Make sure the App.js file is positioned in src folder

_redux_redux_store__WEBPACK_IMPORTED_MODULE_2___default.a.getState is not a function

I have searched so many but could'nt find answer on this bug please can you help.
_redux_redux_store__WEBPACK_IMPORTED_MODULE_2___default.a.getState is not a function
This is my redux store
import {combineReducers, createStore} from "redux";
import profileReducer from "./profile-reduce";
import dialogsReducer from "./dialogs-reduce";
import sidebarReducer from "./sidebar-reduce";
let reducers = combineReducers({
profilePage: profileReducer,
dialogsPage:dialogsReducer,
sidebar: sidebarReducer
});
let store = createStore(reducers);
export default store;
This is index.js
import React from 'react';
import * as serviceWorker from './serviceWorker';
import store from "./redux/redux-store"
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
let rerenderEntireTree = (state)=> {
ReactDOM.render(
<BrowserRouter>
<App state={state} dispatch={store.dispatch.bind(store)} store={store}/>
</BrowserRouter> ,document.getElementById('root'));
}
rerenderEntireTree(store.getState());
store.subscribe(()=>{
let state = store.getState();
rerenderEntireTree(state);
});
serviceWorker.unregister();

In your index.js try doing this
import React from 'react';
import * as serviceWorker from './serviceWorker';
import store from "./redux/redux-store"
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import {BrowserRouter} from "react-router-dom";
import { Provider } from 'react-redux';
ReactDOM.render(
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);

So I have done it by myself, the problem was in naming files. So needed to name my redux-store to redux-store.jsx and it worked.

HashRouter show File:// on build

Why my project show Index of folder when build, but when it running, it works
My Index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import rootReducer from "./reducers";
import { HashRouter } from "react-router-dom";
import App from "./App";
import "./index.css";
import createBrowserHistory from "history/createBrowserHistory";
const store = createStore(rootReducer);
const history = createBrowserHistory();
ReactDOM.render(
<Provider store={store}>
<HashRouter history={history}>
<App />
</HashRouter>
</Provider>,
document.getElementById("root")
);
My App.js
import React, { Component } from "react";
export default class App extends Component {
render() {
return (
<div>
<h1>ABC</h1>
</div>
);
}
}
When i call my index.html and my bundle.js after build

React Router 4 Failed context type

I have plugged react router 4 into my react-create-app and upon running npm run test I get the following error:
Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
in Switch (at App.js:17)
in main (at App.js:16)
in div (at App.js:15)
in App (at App.test.js:7)
I am using react-router#4.2.0, and react-router-dom#4.2.2
I have ensured my <Switch> component is nested within <BrowserRouter>.
App.js:
import React, { Component } from 'react';
import { Switch, Route, withRouter, Router } from 'react-router-dom';
import './App.css';
// Components
import Header from '../../components/header/Header';
import Nav from '../../components/nav/Nav';
import Dashboard from './../../containers/dashboard/Dashboard';
import Events from './../../containers/events/Events';
import NotFound from './../../containers/notfound/NotFound';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Nav />
<main id="main">
<Switch context="router">
<Route path="/" exact component={Dashboard} />
<Route path="/events" exact component={Events} />
<Route path="*" component={NotFound} />
</Switch>
</main>
</div>
);
}
}
export default App;
and my index.js
import ReactDOM from 'react-dom';
import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import Store from './store';
import App from './containers/app/App';
import './index.css';
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
Anybody else come across this?

It is default test example of Create React App.
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
});
Router context is provided in the 'index.js' file and doesn't exist when you run the test.
You should rewrite it next way:
import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
const StoreInstance = Store();
ReactDOM.render(
<Provider store={StoreInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>,
div
);
});
or move 'Provider' and 'BrowserRouter into 'App' component.