I am encountering issues with an outdated version of CRUD where some codes are no longer functioning as expected. Visual Studio Code does not flag them as errors, so the page continues to load but my content box remains empty. Can someone assist me with this?
There are 4 codes that I believe need improvement...
First, my header is not displaying the props.icon tasks
import './Header.css'
import React from 'react'
export default function props () {
return (
<header className = "header d-none d-sm-flex flex-column">
<h1 className="mt-3">
<i className={`fa fa-${props.icon}`}></i>{props.title}
</h1>
<p className="lead text-muted">{props.subtitle}</p>
</header>
)}
Next, my main.jsx contains the import for my header
import './Main.css'
import React from 'react'
import Header from './Header'
function props () {
return (
<React.Fragment>
<Header {...props}/>
<main className="content container-fluid">
<div className="p-3 mt-3">
{props.children}
</div>
</main>
</React.Fragment>
)
}
export default props
Now, my app.jsx and app.css render my HTMLs
import 'bootstrap/dist/css/bootstrap.min.css'
import 'font-awesome/css/font-awesome.min.css'
import './App.css'
import React from 'react'
import {HashRouter} from 'react-router-dom'
import Routes from './Routes'
import Logo from '../components/template/Logo'
import Navi from '../components/template/Navi'
import Footer from '../components/template/Footer'
function Props () {
return(
<HashRouter>
<div className="App">
<Logo />
<Navi/>
<Routes/>
<Footer />
</div>
</HashRouter>
)
}
export default Props
//////////////////////////
:root{
--bg-dark: #1a2f3a;
--logo-height: 100px;
--header-height: 100px;
...
}
Then, my routes.jsx
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
Finally, my home component, which is associated with the main component and represents the '/' path
import React from 'react'
import {Switch, Route, Redirect} from 'react-router'
import Home from '../components/home/Home'
import UserCrud from '../components/user/UserCrud'
function Props (){
return(
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/users" component={UserCrud}/>
<Redirect from="*" to="/"/>
</Switch>
)
}
export default Props
I have been trying to resolve this error for 2 days now, and I suspect it might be a syntax error. If you have expertise in this area, please share your insights.
I am seeing some console issues including warnings about
require("history").createMemoryHistoryrequire("history").PathUtils. Additionally, there is a warning about componentWillMount being renamed. Any assistance in resolving these issues would be greatly appreciated.