We Keep Coding

Warning: Please use `require("history").createBrowserHistory` instead of `require("history/createBrowserHistory")`

hi I am getting this warning and I want this warning to be solved and wouldn't be displayed on the console tab so I could upload my code to netlify and as far as I have read the documentation and policies of netlify, it says warnings and errors may be the reason that it can't be uploaded so I need this to be solved
index.js file
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter, Route, Link } from 'react-browser-router';
import "../src/assets/css/index.scss";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
reportWebVitals();
package.json
{
"name": "daryaft-yar",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"axios": "^1.1.3",
"lodash": "^4.17.21",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-browser-router": "^2.1.2",
"react-cookie": "^4.1.1",
"react-dom": "^18.2.0",
"react-icons": "^4.6.0",
"react-paginate": "^8.1.4",
"react-scripts": "5.0.1",
"sass": "^1.55.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
app.js
import './App.css';
import { Switch, Route, Redirect } from 'react-router-dom';
import React, { Component } from 'react';
import Shop from './Components/shop-bot/shop';
import Home from './Components/shop-bot/botHome';
import Coin from './Components/Coin/coin';
import Wallet from './Components/Wallet/wallet';
import AddCoin from './Components/AddCoin/add-coin';
import Cart from './Components/cart/cart';
import FinalCart from './Components/final-cart/final-cart';
import UserForm from './Components/user-from/user-form';
class App extends Component {
componentDidMount() {
}
render() {
return (
<React.Fragment>
<Switch >
<Route path="/bot/shop" component={Shop}/>
<Route path="/bot/home" component={Home} />
<Route path="/bot/coin" component={Coin} />
<Route path="/bot/buy-coin" component={AddCoin} />
<Route path="/bot/wallet" component={Wallet} />
<Route path="/bot/cart" component={Cart} />
<Route path="/bot/cart-final" component={FinalCart} />
<Route path="/bot/user-data" component={UserForm} />
<Redirect from="/" exact to="/bot/shop" />
</Switch>
</React.Fragment>
);
}
}
export default App;

I'll be honest, "react-browser-router": "^2.1.2", in the package.json file seems like a mistake.
I don't think it's necessary
You are missing react-router-dom as a dependency.
I suggest uninstalling react-browser-router and installing react-router-dom#5 so the Switch and Redirect components can still be imported. Installing the latest RRDv5 is important since there are potential issues with react#18 and the React.StrictMode component and RRDv5 versions below v5.3.3, and if you don't specify v5 then the latest v6 version will be installed which has a lot of breaking changes.
From the terminal in the root project directory run:
npm uninstall --save react-browser-router
npm install --save react-router-dom#5
Update the index.js file to import the BrowserRouter from react-router-dom.
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from 'react-router-dom';
import "../src/assets/css/index.scss";
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);
From here you should restart the app locally to ensure all is well and working before deploying the app again.

React routing cannot read pathname property on navigation

I have recently started developing frontend apps with React and I come from a little programming experience with react-native.
To improve my knowledge on react I studied both the official documentation and took courses on udemy.
So I'm building a small test app in which to use react routing (following what we saw in the udemy course).
However, I have the following error related to routing (I attach the error screen)
I have searched here on the stack that online for possible solutions, such as downgrading react-router-dom, or modifying the history declaration, but unfortunately I still get this error and I can't understand what it comes from.
Do you have any suggestions or advice?
My app configuration:
package.json
"name": "app1",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.8.1",
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"history": "^5.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-redux": "^7.2.8",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
routes.js
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';
//react router import
import { Router, Route } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router history={history.location} navigator={history} >
<div>
<Header />
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</div>
</Router>
</div>
)
}
}
export default Routes;
-history.js
var createHistory = require('history').createBrowserHistory;
export default createHistory();

Issue
The low-level Router takes a few different props than it did in v5.
Router
declare function Router(
props: RouterProps
): React.ReactElement | null;
interface RouterProps {
basename?: string;
children?: React.ReactNode;
location: Partial<Location> | string; // <-- required
navigationType?: NavigationType;
navigator: Navigator; // <-- required
static?: boolean;
}
Router source
export function Router({
basename: basenameProp = "/",
children = null,
location: locationProp, // <-- undefined location
navigationType = NavigationType.Pop,
navigator,
static: staticProp = false,
}: RouterProps): React.ReactElement | null {
...
let {
pathname = "/", // <-- cannot read "pathname" of undefined!
search = "",
hash = "",
state = null,
key = "default",
} = locationProp;
...
if (location == null) {
return null;
}
return (
<NavigationContext.Provider value={navigationContext}>
<LocationContext.Provider
children={children}
value={{ location, navigationType }}
/>
</NavigationContext.Provider>
);
}
You are incorrectly using a history prop instead of the location prop, and this is why location is undefined in the component and unable to read a pathname.
Additionally, in react-router-dom#6 the Route components necessarily need to be wrapped in the Routes component in order for route path matching and rendering to work.
Solution
Pass the correct required props and wrap the Route components in Routes component.
import React, { Component } from 'react';
import Component1 from './functional/component1';
import Component2 from './functional/component2';
import Component3 from './functional/component3';
//import container home-page
import Container1 from './containers/container1';
import Header from './containers/header';
import history from './utils/history';
//react router import
import { Router, Routes, Route } from 'react-router';
class Routes extends Component {
render() {
return (
<div>
<Router location={history.location} navigator={history} >
<div>
<Header />
<Routes>
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Routes>
</div>
</Router>
</div>
)
}
}

You are using react router v6 and in v6 you have to wrap all of your route's in <Routes>...</Routes> tag.
//react router import
import { Router, Route, Routes } from 'react-router'; // Make sure to import ----Routes----
class Routes extends Component {
render() {
return (
<div>
<Router history={history.location} navigator={history} >
<div>
<Header />
<Routes>
<Route path="/" component={Container1} />
<Route path="/component1" component={Component1} />
<Route path="/component2" component={Component2} />
<Route path="/component3" component={Component3} />
</Routes>
</div>
</Router>
</div>
)
}
}
export default Routes;
And you can't add anything between <Routes>...</Routes> except <Route />.

How I can use BrowserRouter in React correctly?

I'm creating a React project and I want to implement the BrowserRouter but the problem is that when I used it, it always throw the React Error of:
***Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.***
I don't know what is this about, because as far as I know, I'm not using hooks and I read the documentation and other tutorials to solve this problem (like deleting double react or npm link and that's stuff) but this still a problem.
Here are my files.
App.js
import { BrowserRouter, Route, Routes, Link } from "react-router-dom";
import Navbar from "./components/navbar"
import Login from "./components/login";
// import CreateExercise from "./components/create-exercise.component";
// import CreateUser from "./components/create-user.component";
function App() {
return (
// <h1>HOASNKFNLSA</h1>
// <div>
// <Home/>
// </div>
<BrowserRouter>
<Routes>
<Route path="/" render={() => {
<h1>HOKAKSFNAKSO</h1>
}}>
</Route>
</Routes>
</BrowserRouter>
);
}
function Home() {
return (
<div className="container text-center">
<h1>KEVIN STYLE PELUQUERIA</h1>
</div>
);
}
function About() {
return (
<div>
<h2>About</h2>
</div>
);
}
function Dashboard() {
return (
<div>
<h2>Dashboard</h2>
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
package.json
{
"name": "kevin-style-peluqueria",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.1",
"#testing-library/react": "^11.2.7",
"#testing-library/user-event": "^12.8.3",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I don't know if you need anything else, but if you do, ask me in comments. If you need to know more extra info, I'm not using webpack. I'm using the classic React structure application when you do the command npx create-react-app. I'm also using express and MongoDB like my backend (basically I'm creating an application with the MERN Stack).

You should do something like this.
And take a look to the docs with examples
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'
ReactDOM.render(
<React.StrictMode>
<Router>
<App />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();

My React App never loads in localhost:3000 its just always spinning (Think React-Router-Dom is the issue)

I have been developing a website in React using React-Bootstrap, and it has worked fine up until I installed and configured React-Router-Dom and started implementing routes, links, etc...(I have also installed react-router-bootstrap to work with it)
I am almost certain it is react-router-dom that is the issue as at the beginning, I was having similar issues. When I made a new fresh project, I decided not to install react-router-dom until towards the end of the development.
When I run NPM Start, it appears on my browser with the React favicon and name of the app, but the loading spinner is just constantly loading.
In the Command-Line, the development server compiles successfully, and there are no errors - so I'm finding it hard to work out where the issue is.
All relevant code is below.
App.js
import './App.css';
import Navigation from "./Components/Nav";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Col, Container, Row } from 'react-bootstrap';
import Karousel from './Components/Carousel';
import YtCard from './Components/Cards/YoutubeCard';
import BandcampCard from './Components/Cards/BandcampCard';
import SpotifyCard from './Components/Cards/SpotifyCard';
import Footer from './Components/Footer';
import { FormspreeProvider } from '#formspree/react';
import {
BrowserRouter as Router,
Switch,
Route,
Link
} from "react-router-dom";
import { HashRouter } from 'react-router-dom'
import Contact from './Pages/Contact';
function App({Component, pageProps }) {
return (
<FormspreeProvider project="{music-boostrap}">
<Router>
<div className="app">
<div className="navigation">
<Navigation/>
</div>
<Switch>
<Route exact path="/" component={App}/>
<Route path="/contact" component={Contact}/>
</Switch>
<div className="carousel">
<Container className="carousel-container" fluid>
<Karousel/>
</Container>
</div>
<div className="description">
<Container fluid>
<Row>
<Col className="desc-col">
<YtCard/>
</Col >
<Col className="desc-col">
<BandcampCard/>
</Col>
<Col className="desc-col">
<SpotifyCard/>
</Col>
</Row>
</Container>
</div>
<Footer/>
</div>
</Router>
</FormspreeProvider>
);
}
export default App;
package.json
{
"name": "music-bootstrap",
"version": "0.1.0",
"private": true,
"dependencies": {
"#formspree/react": "^2.2.3",
"#testing-library/jest-dom": "^5.11.9",
"#testing-library/react": "^11.2.5",
"#testing-library/user-event": "^12.7.3",
"bootstrap": "^4.6.0",
"react": "^17.0.1",
"react-bootstrap": "^1.5.0",
"react-dom": "^17.0.1",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
If any files are missing with code you might think is relevant to solving these issues, please let me know!

You're attempting to render App inside App, which results in an endless recursion, you need to use a different component here
<Route exact path="/" component={App}/>

Why does my react app go to the custom 404 not found page when the link is clicked?

My app was built using create-react-app. It all works fine once I'm using the app except when I click on the link from my portfolio website (on MAMP local host), it loads the custom 404 page instead of the Home component. When I load the app from npm run start it lands on the Home component first, I want it to do this on localhost and my live website too.
I've tried changing the "homepage" in package.json to "." but it still does the same thing.
// App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Header from './components/layout/Header';
import NotFound from './components/layout/NotFound';
import Alert from './components/layout/Alert';
import Home from './components/content/Home';
import Movie from './components/content/movies/Movie';
import AlertState from './context/alert/AlertState';
import MovieState from './context/movies/MovieState';
const App = () => {
return (
<MovieState>`enter code here`
<AlertState>
<Router>
<Header text={"Movie App"}/>
<Alert />
<Switch>
<Route path='/' component={Home} />
<Route path='/movie/:title' component={Movie} />
<Route component={NotFound} />
</Switch>
</Router>
</AlertState>
</MovieState>
);
}
export default App
package.json
{
"name": "film_app",
"version": "0.1.0",
"homepage": ".",
"dependencies": {
"axios": "^0.19.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
// Home.js
import React from 'react';
import Search from './Search';
import Movies from './movies/Movies';
const Home = () => {
return (
<>
<Search />
<Movies />
</>
)
}
export default Home
// NotFound.js
import React from 'react';
const NotFound = () => {
return (
<div>
<h1>
Page Not Found
<p className='lead' style={notFoundStyles}>
The page you are looking for does not exist
</p>
</h1>
</div>
)
}
const notFoundStyles = {
textAlign: 'center',
};
export default NotFound
There is no error message, it just shows the NotFound component rather than the Home component.

Add exact flag to your Home route, and path='/' to the fallback route.
<Switch>
<Route path='/' exact={true} component={Home} />
<Route path='/movie/:title' component={Movie} />
<Route path='/' component={NotFound} />
</Switch>