CODEWITHSUNDEEP
javascriptreactjsreact-router-dom
Dhruv verma
Dhruv verma

Reputation: 57

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.

Upvotes: 1

Views: 109

Answers (1)

RubenSmn
RubenSmn

Reputation: 4672

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/>

Upvotes: 1

Related Questions