Modification 1 : Question originale : Comment créer une application monopage à l'aide de React
Comme la question n'est pas assez précise et a déjà reçu une réponse, vous devez apprendre le routage React à partir de la réponse d'Imran Rafiq Rather
Modification 2 : Réécrivez la question et rouvrez-la pour un cas d'utilisation plus spécifique.
Je suis un tutoriel pour apprendre à router des pages à l'aide de React-route. Jusqu'à présent, je comprends que je dois ajouter la balise <Route> dans la fonction createRoutesFromElements du composant createBrowserRouter(). Le code est le suivant :
const router = createBrowserRouter(
createRoutesFromElements(
<Route path="/" element={<RootLayout/>}>
<Route index element={<Home/>}/>
</Route>
))
Dans chaque "element=", des pages créées de manière modulaire sont importées. Le contenu est le suivant :
RootLayout.js du tutoriel
export default function RootLayout(){
return(
<div className='root-layout'>
<header>
<nav>
<h1> Jobarouter </h1>
<NavLink to="/"> Home </NavLink>
<NavLink to="about"> About </NavLink>
<NavLink to="help"> Help </NavLink>
<NavLink to="careers"> Login </NavLink>
</nav>
</header>
<main>
<Outlet/>
</main>
</div>
)
}
Si j'ai un ancien composant créé par JSX React Bootstrap, le code est le suivant :
NavbarLayout.js
const NavbarComp = () => {
//navbar content
}
export default NavbarComp;
Ensuite, le parcours sera comme ceci :
<header>
<NavbarComp/>
</header>
Pourquoi le composant n'apparaît-il pas sur ma page sans aucune erreur ?
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Vous essayez de mettre un composant JS dans un fichier
index.htmlnormal.Cela ne s'applique pas du tout. Avec une bibliothèque comme ReactJS, nous avons fait tout le travail préparatoire via la bibliothèque
ReactDOM.render(<App/>, document.querySelect('#root')), qui est JavaScript lui-même en interne. Ainsi, dans ce cas, une application sur une seule page signifie que nous utilisons un élément avec id='root' et mettons tout le code dans cet élément.Ce n’est donc pas une approche correcte. Lancer une application d'une seule page de cette manière ne fonctionnera pas, sans parler des problèmes qui en découlent.