Develop Reference

How do I fix the white screen after I "npm Start" my react app?

So ive created a e-commerce website using react and it was working perfectly. however and I accidentally deleted the packagej.son file I've recently recovered it and its exactly how it was before, however now whenever I try to run the app I get a white screen. The app is compiling with no errors and seems to be working fine. and I've tried everything and have been debugging for hours. Please help me.
if the question is bad please dont slate me im new to stack overflow.
Here is my package.json:
{
"name": "ecommerce-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.9.1",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^14.4.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-fast-marquee": "^1.3.5",
"react-helmet": "^6.1.0",
"react-icons": "^4.7.1",
"react-image-zoom": "^1.3.1",
"react-rating-stars-component": "^2.2.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.0",
"react-scripts": "5.0.1",
"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"
]
}
}
`
here is my App.js:
`import React from 'react';
`import './App.css';`
`import { BrowserRouter,Routes,Route } from 'react-router-dom';
`import Layout from './components/Layout';
`import Home from './pages/Home';`
`import About from './pages/About';`
`import Contact from './pages/Contact';`
`import OurStore from './pages/OurStore';``
`import Blogs from './pages/Blogs';`
`import CompareProduct from './pages/CompareProduct';`
`import Wishlist from './pages/Wishlist';`
`import Login from './pages/Login';
`import Cart from './pages/Cart';``
`import Forgotpassword from './pages/Forgotpassword';`
`import Signup from './pages/Signup';`
import Resetpassword from './pages/Resetpassword';
import SingleBlog from './pages/SingleBlog';
import PrivacyPolicy from './pages/PrivacyPolicy';
import RefundPolicy from './pages/RefundPolicy';
import ShippingPolicy from './pages/ShippingPolicy';
import TermsOfService from './pages/TermsOfService';
import SingleProduct from './pages/SingleProduct';
import Checkout from './pages/Checkout';
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element= {<Layout />}>
<Route index element={<Home />}/>
<Route path="about" element={<About />}/>
<Route path="contact" element={<Contact />}/>
<Route path="store" element={<OurStore />}/>
<Route path="/product/:id" element={<SingleProduct />}/>
<Route path="blogs" element={<Blogs />}/>
<Route path="/blog:id" element={<SingleBlog />}/>
<Route path="compare-product" element={<CompareProduct />}/>
<Route path="wishlist" element={<Wishlist />}/>
<Route path="login" element={<Login />}/>
<Route path="cart" element={<Cart />}/>
<Route path="checkout" element={<Checkout />}/>
<Route path="forgot-password" element={<Forgotpassword />}/>
<Route path="sign-up" element={<Signup />}/>
<Route path="reset-password" element={<Resetpassword />}/>
<Route path="privacy-policy" element={<PrivacyPolicy />}/>
<Route path="refund-policy" element={<RefundPolicy />}/>
<Route path="shipping-policy" element={<ShippingPolicy />}/>
<Route path="terms-and-conditions" element={<TermsOfService />}/>
</Route>
</Routes>
</BrowserRouter>
</>
);
}`
export default App;
here is my index.js:
`import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
const container = document.getElementById('root');
const root = createRoot(container);
`
`root.render(<App />);``
Heres my output:
Output
`
what ive tried:
changing "homepage" in the package.json to my git repository and localhost:3000
run build whenever i changed something in the j,son
tried changing the default localhost port
changed BrowserRouter to HashRouter
but none gets rid of the white screen.

Without more context or error logs, it is difficult to determine the root cause of the issue, but here are a few steps you can try:
Check the component imported in SingleBlog and SingleProduct if they are correctly imported and working as expected.
Check the Route path values and make sure they match the component file names.
You can try adding a catch-all Route component to see if there's an issue with the routing itself, like so:
<Route path="*" element={<div>Page not found</div>} />
Try clearing your browser cache to see if it helps.
If none of these steps work, you may want to try adding some debugging information in the form of console.log statements to see where the issue may be originating from.

It works now! turns out is was that my tags got to have "to", for anyone that faces the same issue. add to all of your Link tags if your console.log says "Cannot read properties of undefined (reading 'pathname')" or "the above error occurred in the link component react "

Webpack is getting compiled but nothing is visible in react

This is my App.js
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import MainRoutes from './routes/MainRoutes';
import AuthRoutes from './routes/AuthRoutes';
import './styles/layout.css';
const App = () =>{
return (
<div className="App">
<Router>
<AuthRoutes />
<MainRoutes />
</Router>
</div>
);
}
export default App;
I am making a blog website but whenever I'm compiling my code the browser shows me nothing
Console is also empty, has nothing to understand that where my code is wrong, it have multiple warnings.
this is my MainRoutes.js
import React from 'react'
import {Routes, Route} from 'react-router-dom'
import {ScrollToTop} from '../components/shared'
import ProfileScreen from '../screens/Settings/ProfileScreen'
import DetailsScreen from '../screens/Public/DetailsScreen'
import UploadScreen from '../screens/Public/UploadScreen'
import EditScreen from '../screens/Settings/EditScreen'
import UserScreen from '../screens/Public/UserScreen'
import DashboardScreen from '../screens/Settings/DashboardScreen'
import CategoryScreen from '../screens/Public/CategoryScreen'
const MainRoutes = () => {
return (
<ScrollToTop>
<Routes>
<Route path='/search/:keyword' component={UploadScreen} exact/>
<Route path='/category/:category' component={UploadScreen} exact/>
<Route path='/category' component={CategoryScreen} exact/>
<Route path='/post/:id/edit' component={EditScreen} exact/>
<Route path='/my_posts' component={DashboardScreen} exact/>
<Route path='/post/:id' component={DetailsScreen} exact/>
<Route path='/profile' component={ProfileScreen} exact/>
<Route path='/user/:id' component={UserScreen} exact/>
<Route path='/' component={UploadScreen} exact/>
</Routes>
</ScrollToTop>
)
}
export default MainRoutes;
This is my AuthRoutes.js
import React from 'react'
import {Route, Routes} from 'react-router-dom'
import LoginScreen from '../screens/Auth/LoginScreen'
import SignUpScreen from '../screens/Auth/SignUpScreen'
import ScrollToTop from '../components/shared/ScrollToTop'
const AuthRoutes = () => {
return (
<ScrollToTop>
<Routes>
<Route path='/login' element={LoginScreen}/>
<Route path='/signup'element={SignUpScreen}/>
</Routes>
</ScrollToTop>
)
}
export default AuthRoutes;
its my Package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"#chakra-ui/react": "^2.4.6",
"#cloudinary/react": "^1.9.0",
"#cloudinary/url-gen": "^1.8.7",
"#emotion/react": "^11.10.5",
"#emotion/styled": "^11.10.5",
"#redux-devtools/extension": "^3.2.5",
"#testing-library/jest-dom": "^5.16.5",
"#testing-library/react": "^13.4.0",
"#testing-library/user-event": "^13.5.0",
"#tinymce/tinymce-react": "^4.2.0",
"antd": "^5.1.6",
"axios": "^1.2.6",
"bootstrap": "^5.2.3",
"combine-reducers": "^1.0.0",
"firebase": "^9.15.0",
"framer-motion": "^8.0.2",
"froala-editor": "^4.0.16",
"jwt-decode": "^3.1.2",
"moment": "^2.29.4",
"react": "^18.2.0",
"react-bootstrap": "^2.7.0",
"react-dom": "^18.2.0",
"react-icons": "^4.7.1",
"react-loader-spinner": "^5.3.4",
"react-quill": "^2.0.0",
"react-redux": "^8.0.5",
"react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1",
"react-use-googlelogin": "^0.12.5",
"redux": "^4.2.1",
"redux-thunk": "^2.4.2",
"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"
]
},
"devDependencies": {
"css-loader": "^6.7.3"
}
}
Please help me to get out of this, every piece of advice will be appreciated.

You're still using the old props for specifing the components for your routes. See upgrading from v5 on the React Router Dom docs.
You should pass the element prop the jsx component. This is the same for all your other Route components.
<Route path='/login' element={<LoginScreen />}/>
// and
<Route path='/search/:keyword' element={<UploadScreen />} exact/>
Instead of
<Route path='/login' element={LoginScreen}/>
// and
<Route path='/search/:keyword' component={UploadScreen} exact/>

React router routers not showing

I can't seem to figure out why my router routes aren't rendering. I am in the very beginning of building my app so there isn't much code and I've tried several different methods and still nothing. I just have div's right now in the components i'm trying to route and the text inside isn't coming up - they were working when I had just the components in my App.js file before I tried routing them. Any ideas?
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Routes, Route} from 'react-
router-dom'
import Main from './components/Main';
import AddUser from './components/AddUser';
import EditUser from './components/EditUser';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>Home</h1>
</header>
<Router>
<Routes>
<Route exact path="/" component={Main} />
<Route path="/AddUser" component={AddUser} />
<Route path="/edit" component={EditUser} />
</Routes>
</Router>
</div>
);
}
export default App;
// My JSON file \
{
"name": "w15-crud",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.4",
"#testing-library/react": "^13.2.0",
"#testing-library/user-event": "^13.5.0",
"bootstrap": "^5.1.3",
"react": "^18.1.0",
"react-dom": "^18.1.0",
"react-router": "^6.3.0",
"react-router-dom": "^6.3.0",
"react-scripts": "^2.1.3",
"reactstrap": "^9.0.2",
"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"
]
}
}

The react-router-dom#6 Route component API changed. There is no longer a component prop for rendering routed components. Use the element prop and pass a ReactNode, a.k.a. JSX.
See Routes and Route
declare function Route(
props: RouteProps
): React.ReactElement | null;
interface RouteProps {
caseSensitive?: boolean;
children?: React.ReactNode;
element?: React.ReactNode | null;
index?: boolean;
path?: string;
}
Example:
<Router>
<Routes>
<Route path="/" element={<Main />} />
<Route path="/AddUser" element={<AddUser />} />
<Route path="/edit" element={<EditUser />} />
</Routes>
</Router>

browser router not being exported from react router

I am tring to use the react router dom to make different pages so that it can go to different pages on click but the app does not compile since browser router is not being imported. I just copy pasted it straight from the website. Can someone tell me where the mistake is and how to fix it
App,js
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Switch>
<Route path='detail'>
<Detail />
</Route>
<Route path='/'>
<Home />
</Route>
</Switch>
</Router>
<Home />
</div>
)
}
export default App;
package.json
{
"name": "disneyplus-clone",
"version": "0.1.0",
"private": true,
"dependencies": {
"#reduxjs/toolkit": "^1.6.2",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-redux": "^7.2.6",
"react-router-dom": "^6.1.0",
"react-scripts": "4.0.3",
"react-slick": "^0.28.1",
"slick-carousel": "^1.8.1",
"styled-components": "^5.3.3"
},
"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"
]
}
}

You are using version 6 of react-router-dom and you don't have react-router specified in your package.json file.
Import the components from react-router-dom and convert to using the RRDv6 components. The Switch component was replaced by a Routes component that must wrap the Route components. The Route components also now render their routed components on the element prop as JSX.
import React from 'react';
import Header from './components/Header';
import Home from './components/Home';
import './App.css';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
import Detail from './components/Detail';
function App() {
return (
<div className='App'>
<Router>
<Header />
<Routes>
<Route path='detail' element={<Detail />} />
<Route path='/' element={<Home />} />
</Routes>
</Router>
<Home />
</div>
)
}

React- Getting a white screen

I was trying to create a simple react app using create-react-app. I wanted to use react-router and test that I have the routing set up nicely. However, when I tried to run the app using npm start, I am just seeing a white screen and this really confused me as I cannot find a source for my error.
This is my package.json file.
{
"name": "blog",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "3.4.3"
},
"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"
]
}
}
My index.js
import React from "react";
import "./App.css";
import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
import Home from "./Components/Home";
import Error from "./Components/Error";
import Blog from "./Components/Blog";
//switch ensures the rendering of only one component
// Route tag are the links b/w the components and placed b/w switch tags
function App() {
return (
<Router>
<div className="App">
<ul>
<li>
<Link to="/">Home </Link>
</li>
<li>
<Link to="/blog">Blog </Link>
</li>
</ul>
<div>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/blog" component={Blog} />
<Route component={Error} />
</Switch>
</div>
</div>
</Router>
);
}
export default App;

You need to put
ReactDOM.render(<App/>, document.getElementById('root'));
Somewhere to tell react inside which HTML element to put all the components