Considérez le code:
import React from 'react';
import { Link, BrowserRouter } from 'react-router-dom';
import { ReactComponent as Logo } from '../../assets/crown.svg';
import './header.styles.scss';
const Header = () => (
<BrowserRouter>
<div className='header'>
<Link className='logo-container' to='/'>
<Logo className='logo' />
</Link>
<div className='options'>
<Link className='option' to='/shop'>
SHOP
</Link>
<Link className='option' to='/contact'>
CONTACT
</Link>
</div>
</div>
</BrowserRouter>
);
export default Header;
3 Réponses :
Avez-vous configuré les itinéraires? Ce serait dans approche.js par exemple:
Je n'ai pas d'approche.js
Regardez ce guide Reacttraining.com/react-router/web/Guides/Quick- Commencez , puis faites simplement la même chose qu'il est assez simple, bien sûr, vous pouvez mettre des composants dans des fichiers séparés.
Si vous voulez naviguer dans votre utilisateur, essayez d'utiliser NavLink ou ajoutez-le à la composante et poussez-les sur les autres pages
- NavLink Solution: P>
<p className='logo-container' onClick = {() => props.history.push('/')}>
<Logo className='logo' />
</p>
Afin de naviguer à différents composants, vous devez définir des routeurs. Donc, réagir-routeur-dom saura quoi afficher.
L'autre chose est que vous ne pouvez pas mettre BrowserRouter à l'intérieur du composant d'en-tête. Composant Voici comment vous devez implémenter correctement le routage dans React.js p> dans le dossier SRC / OMPONENT Créez vos composants pour les itinéraires. P> SRC / Composant / Shop.js: p> BrowserRouter CODE> enveloppe l'objet Historique dans le navigateur et le transmet à l'arborescence des composants. BrowserRouter est une enveloppe. L'en-tête doit être placé à l'intérieur du navigateur, mais pas ici. Il suffit de créer votre composant d'en-tête sans navigateur. p> import React from "react";
import ReactDOM from "react-dom";
import AppRouter from "./routers/AppRouter";
ReactDOM.render(<AppRouter />, document.getElementById("app"));