React 18+react-router-dom5中AuthContext致页面空白问题求助

使用React 18.2.0和react-router-dom 5.2.0开发项目，原本功能输出符合预期，但引入AuthContext.Provider（AuthProvider）后页面仅渲染空白内容。以下是项目文件代码，恳请提供包含具体修改点的解决方案：

项目代码 #

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')
);

解决方案及修改点 #

1. 修正AuthContext.js的拼写错误
   页面空白的核心原因是createContex拼写错误，需改为正确的createContext。修改后的代码：

   import { createContext, useState, useEffect } from "react";
   
   const AuthContext=createContext()
   
   export default AuthContext;
   
   export const AuthProvider=({children}) => {
       return (
       <AuthContext.Provider value={{'name':'Muks'}}>
           {children}
       </AuthContext.Provider>);
   }
   

2. 适配react-router-dom 5的PrivateRoute写法
   当前PrivateRoute接收component属性但未正确渲染，需调整逻辑通过render方法实现组件渲染判断。修改后的代码：

   import { Route, Redirect } from 'react-router-dom'
   
   const PrivateRoute = ({ component: Component, ...rest }) => {
       const authenticated = false;
       return (
           <Route
               {...rest}
               render={(props) =>
                   authenticated ? <Component {...props} /> : <Redirect to="/login" />
               }
           />
       )
   }
   
   export default PrivateRoute;
   

内容的提问来源于stack exchange，提问作者Strange2608