-1

Am working on a react web application and in my App.js when I pass the components without the routing they get rendered.


    function App() {
      return (
      <>
        <NavbarComp /> 
        <div className='content-container'><LoginForm/></div>
        <Footer/>
        </>
          
        );
    }
    export default App;

this for exemple renders all the components without any probleme. But when am adding the routing ike follows:


    import 'bootstrap/dist/css/bootstrap.min.css';
    import NavbarComp from './Components/NavbarComp';
    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
    import './App.css';
    import CardList from './Components/CardList';
    import Footer from './Components/Footer';
    import LoginForm from './Components/LoginForm'
    import Profil from './Pages/Profil';
    
    
    
    function App() {
      return (
       <Router>
                <div className='content-container'>
                <NavbarComp handleLoginClick={handleLoginClick}/>
                <Routes>
                    
                <Route exact path="/login" element= {<LoginForm />}>
                </Route>
                <Route exact path="/homepage" element= {
                    <>
                    <CardList/> 
                    </>
                }
                ></Route>
                <Route exact path="profil" element={
                    <Profil />
                }>  
                </Route>
                </Routes>
                </div>
                <div className='footer-pin'><Footer /></div>
            </Router>
          
        );
    }
    export default App;

when compiling am getting a blank page.

abdo berg
  • 27
  • 6
  • For which url? Any errors in the console? Is the page completely blank, not even things outside routes show up? – Dropout Apr 18 '22 at 18:17
  • check console in developer tools. There should be some error which might be the root cause of the components not rendering. – Satya S Apr 18 '22 at 18:18
  • yeah for all the urls none of them is working.In the console there are errors such:Uncaught TypeError: Cannot read properties of null (reading 'useRef') – abdo berg Apr 18 '22 at 18:34

1 Answers1

0

you don't need the fragments

<Route exact path="/homepage" element= { <> <CardList/> </>}></Route>

also, it can be a selfclosing tag as follow

<Route exact path="/homepage" element= {<CardList/>} />
  • any console errors? this is important to help you accurate
Carlos Damian Perez
  • 109
  • 3
  • 9
  • Yes there are errors : Uncaught TypeError: Cannot read properties of null (reading 'useRef') at useRef (react.development.js:1625:1) at BrowserRouter (index.tsx:147:1) at renderWithHooks (react-dom.development.js:16141:1) at mountIndeterminateComponent (react-dom.development.js:20838:1) at beginWork (react-dom.development.js:22342:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4157:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4206:1) at invokeGuardedCallback (react-dom.development.js:4270:1) – abdo berg Apr 18 '22 at 18:53