1

I was getting the output as expected until I started using the AuthContext here. But after that it just staring rendering a blank page. Can someone please help me out?

Please take a look at my files

Header.js:

import React, {useContext} from 'react'
import { Link } from 'react-router-dom'
import AuthContext from '../context/AuthContext'
const Header = () => {
  let {name}=useContext(AuthContext)
  return (
    <div>
        <Link to="/"> Home </Link>
        <span> | </span>
        <Link to="/login"> Login </Link>
        <p>Hi {name}</p>
        
    </div>

  )
}

export default Header

AuthContext.js:

import { createContex, useState, useEffect } from "react";

const AuthContext=createContex()

export default AuthContext;

export const AuthProvider=({children}) => {
    //let contextData={}
    return (
    <AuthContext.Provider value={{'name':'Muks'}}>
        {children}

    </AuthContext.Provider>);

}

HomePage.js

import React from 'react'

const HomePage = () => {
  return (
    <div>
        <p> I am logged in to the home page!</p>
    </div>
  )
}

export default HomePage

LoginPage.js:

import React from 'react'

const LoginPage = () => {
  return (
    <div>
        <form>
            <input type="text" name="username" placeholder='Enter Username'/>
            <input type="password" name="password" placeholder='Enter Password'/>
            <input type="submit"/>
        </form>
    </div>
  )
}

export default LoginPage

PrivateRoute.js:

import { Route, Redirect } from 'react-router-dom'
//import { useContext } from 'react'
//import AuthContext from '../context/AuthContext'

const PrivateRoute = ({children, ...rest}) => {
    const authenticated=false
    //console.log("PrivateRoute worked fine!")
    //let {user} = useContext(AuthContext)
    return(
        <Route {...rest}>{!authenticated ? <Redirect to="/login" /> : children}</Route>
    )
}

export default PrivateRoute;

** App.js:**

import './App.css';
import { BrowserRouter as Router, Route} from 'react-router-dom'
import PrivateRoute from './utils/PrivateRoute'
import { AuthProvider } from './context/AuthContext';

import HomePage from './pages/HomePage'
import LoginPage from './pages/LoginPage'
import Header from './components/Header';


function App() {
  return (
    <div className="App">
      <Router>
       
        <AuthProvider>
          <Header/>
          <PrivateRoute component={HomePage} path="/" exact/>
          <Route component={LoginPage} path="/login" />    
        </AuthProvider>     
        
      </Router>
    </div>
  );
}

export default App;

index.js:


import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

I would really appreciate if the solution is provided with the changes that I need to make. Thanks.

Strange2608
  • 67
  • 6
  • I believe I see an issue with the `PrivateRoute` component, but the `"/login"` route should still be able to render. Are you saying no route at all is rendering, or only the protected routes have an issue? Can you provide clarity on what exactly the issue is and the exact steps to reproduce? – Drew Reese Nov 01 '22 at 14:48
  • My initial code for App.js did not include the AuthProvider. It was working as expected without the AuthProvider. But as soon as I added it, it started rendering a blank page, for both, HomePage as well as LoginPage ("/login"). Not sure what is wrong with it. – Strange2608 Nov 02 '22 at 01:17
  • Well, the `AuthProvider` isn't doing much of anything but rendering the `children` prop so I doubt there's an issue there. There is a known issue between `react@18` and `react-router-dom` versions below 5.3.3. See if this [answer](/a/71833424/8690857) helps at all. If not then can you try creating a *running* [codesandbox](https://codesandbox.io/) demo that reproduces the issue that we could inspect and debug live? – Drew Reese Nov 02 '22 at 02:24
  • You've a typo, importing `createContex` should be `createContext`, with a "t" at the end. Once this is resolved you've still the issue I described [here](/questions/74276187/authcontext-provider-authprovider-is-rendering-a-blank-page-i-am-using-react#comment131146373_74276187). With `react@18` and `BrowserRouter` rendered within `StrictMode` you need to bump to at least `react-router-dom@5.3.3`. – Drew Reese Nov 04 '22 at 06:12

0 Answers0