Je souhaite utiliser le lien et itinérez dans un composant différent pour utiliser le composant d'en-tête comme une barre Navère mais qui ne fonctionne pas. Ceci est mon code, mais le lien ne fonctionne pas pour changer entre les composants de ReactJS.
App.js
import React, {Component } from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import Header from './Header';
import Body from './Body';
class App extends Component {
render() {
return (
<Router>
<Header></Header>
<Body></Body>
</Router>
);
}
}
export default App;
Header.js
import React, { Component } from 'react';
import {BrowserRouter as Link} from 'react-router-dom';
class Header extends Component {
render(){
return (
<ul>
<li>
<Link to="/home">Home</Link>
</li>
<li>
<Link to="/doc">Doc</Link>
</li>
</ul>
)
}
}
export default Header;
Body.js
import React, { Component } from 'react';
import {BrowserRouter as Route, Switch} from 'react-router-dom';
import Home from './Home';
import Doc from './Doc';
class Body extends Component {
render(){
return (
<Switch>
<Route path="/home" component={Home} ></Route>
<Route path="/doc" component={Doc} ></Route>
</Switch>
);
}
}
export default Body;
Home.js
import React, { Component } from 'react';
class Home extends Component {
render(){
return (
<h1>Home</h1>
)
}
}
export default Home;
Doc.js
import React, { Component } from 'react';
class Doc extends Component {
render(){
return (
<h1>Doc</h1>
)
}
}
export default Doc;
3 Réponses :
Vous importaient de manière incorrecte les modules.
import { Route, Switch } from 'react-router-dom';
Vous devez modifier cette ligne suivante dans votre à et en vous à en-tête composant de classe corps Changement de composant de classe
Le problème est causé par des importations erronées dans les en-têtes.js Il devrait être: Vous pouvez voir l'exemple de travail de Le problème fixe ici