Décrivez ici votre problème ou ce que vous cherchez à faire.
ci dessous le fichier page renderer.js
"import React from "react";
import { useMatch } from "react-router-dom";
const generatePage = page => {
try {
const Component = require(`./pages/${page}`).default
return <Component />;
} catch (err) {
console.warn(err)
return 'Under Construction'
}
}
const PageRenderer = () => {
const {
params: { page }
} = useMatch()
return generatePage(page)
}
export default PageRenderer"
------------------------------------------
ci dessous le fichier app.js
import React from 'react'
import Navigation from './components/navigation';
import { BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom'
import PageRenderer from './page-renderer';
import login from './pages/login'
// dans page renderer l'argument est page ligne 13
function App() {
return (
<Router>
<div className="App">
<Navigation/>
<Routes>
<Route path="/:page" component={PageRenderer}/>
<Route path="/" render ={ ()=> <Navigate to= "/home"/> }/>
<Route path="/login" exact element ={login}></Route>
<Route component={() => 404}/>
</Routes>
</div>
</Router>
);
}
export default App;
**Ce que je veux**
Lors du chargement de ma page lorsque je clique sur un lien, le contenu de la page doit s'afficher
**Ce que j'obtiens**
"le contenu ne s'affiche pas et le message ci dessous s'affiche dans ma console :
react-dom.development.js:86 Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.
at RenderedRoute (http://localhost:3000/static/js/bundle.js:39207:5)
at Routes (http://localhost:3000/static/js/bundle.js:39898:5)
at div
at Router (http://localhost:3000/static/js/bundle.js:39832:15)
at BrowserRouter (http://localhost:3000/static/js/bundle.js:37812:5)
at App
printWarning @ react-dom.development.js:86
error @ react-dom.development.js:60
warnOnFunctionType @ react-dom.development.js:14900
reconcileChildFibers @ react-dom.development.js:15837
reconcileChildren @ react-dom.development.js:19167
updateContextProvider @ react-dom.development.js:21154
beginWork @ react-dom.development.js:21649
beginWork$1 @ react-dom.development.js:27426
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 15 more frames
Show less"