avant-propos
Utilisez des plug-ins liés au routeur dans le système de gestion en arrière-plan de réaction pour compléter la gestion centralisée et le saut de routage, enregistrez-le ici
Processus de mise en œuvre
télécharger react-router-dom
cnpm i -D react-router-dom
Écrire du code fonctionnel dans les composants de navigation
// nav的index.js中
import {
Link } from 'react-router-dom'
<Link to={
item.key}>{
item.title}</Link>
À ce stade, une erreur sera signalée et la route doit être ajoutée à la couche la plus externe
// 在项目入口的index.js文件中
import {
BrowserRouter} from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
)
À ce stade, nous cliquons sur le menu de navigation à gauche et le routage de la page changera.
Ici, nous téléchargeons react-router-config pour une gestion centralisée du routage
cnpm i -D react-router-config
Une fois le téléchargement terminé, créez un nouveau dossier de routeur sous src, créez un nouveau index.js dans le dossier et écrivez d'abord un peu de contenu :
// router文件夹下的index.js
import Home from '../pages/home'
const routes = [
{
path: '/',
exact: true,
component: Home
},
{
path: '/home',
exact: true,
component: Home
}
]
export default routes
Ensuite, allez à app.js
import {
renderRoutes } from 'react-router-config'
import routes from './router'
{
/* <Home/> 这里替换成下面的方法*/}
{
renderRoutes(routes)}
Effet
Cliquez sur l'adresse de routage dans la barre de navigation pour accéder au routeur correspondant
