Вопрос:
У меня большая проблема, я использую реагирующие BrowserRouter, Link и Switch для управления маршрутизацией моего сайта, моя проблема в том, что когда я нажимаю на ссылку, она изменяется на URL, но не отображается, однако, когда я обновляю страницу, она работает.
Это моя страница Index.js:
import React from ‘react’; import ReactDOM from ‘react-dom’; import { BrowserRouter, Route, Switch } from ‘react-router-dom’; import Home from ‘./Home’; import Header from ‘./Header’; import Footer from ‘./Footer’; import Resume from ‘./Resume’; import * as serviceWorker from ‘./serviceWorker’; ReactDOM.render(<Header />, document.getElementById(‘header’)); ReactDOM.render(( <BrowserRouter> <Switch> <Route exact path =»/» component={Home} /> <Route path =»/resume» component={Resume} /> </Switch> </BrowserRouter> ), document.getElementById(‘root’)); ReactDOM.render(<Footer/>, document.getElementById(‘footer’)); serviceWorker.unregister();
Это код Header.js:
import React, { Component } from ‘react’; import bImg from ‘./img/moi2.jpg’; import { BrowserRouter, Link } from ‘react-router-dom’; /** * Composant définissant l’entête de la page (Navigation et la photo de début) * Link est utilisé à la place de <a> pour la gestion des routes. * @Author * @date 15th november 2018 */ class Header extends Component{ render(){ return( <div> <BrowserRouter> <nav className=»navbar navbar-expand-lg navbar-light fixed-top» id=»mainNav»> <div className=»container»> <Link className=»navbar-brand» to=»/»>Iam Root</Link> <button className=»navbar-toggler navbar-toggler-right» type=»button» data-toggle=»collapse» data-target=»#navbarResponsive» aria-controls=»navbarResponsive» aria-expanded=»false» aria-label=»Toggle navigation»> Menu <i className=»fas fa-bars»></i> </button> <div className=»collapse navbar-collapse» id=»navbarResponsive»> <ul className=»navbar-nav ml-auto»> <li className=»nav-item»> <Link to=»/resume»>Mon CV</Link> </li> <li className=»nav-item»> <Link to=»/tutoriels»>Tutoriels</Link> </li> <li className=»nav-item»> <Link to=»/contact»>Contactez-moi</Link> </li> </ul> </div> </div> </nav> </BrowserRouter> <header className=»masthead» style={{backgroundImage: ‘url(${bImg})’}}> <div className=»overlay»></div> <div className=»container»> <div className=»row»> <div className=»col-lg-8 col-md-10 mx-auto»> <div className=»site-heading»> <h1 style={{ opacity: 0.4}}>prenom nom</h1> <span className=»subheading»> Fonction </span> </div> </div> </div> </div> </header> </div> ); } } export default Header;
Это мой код Resume.js:
import React, { Component } from ‘react’; class Resume extends Component{ render(){ return( <div> Hello x Resume </div> ); } } export default Resume;
Home и Footer просты, как Resume.js
Заранее большое спасибо за вашу помощь.
Лучший ответ:
Вам нужно только включить BrowserRouter в свой компонент, чтобы все маршруты знали, на какой маршрутизатор они подписаны, и в то же время ссылки обновляют данные в правильном поставщике маршрутизатора.
В вашем случае элементы Header и Root обернуты Different BrowserRouter и, следовательно, компонент Links in Header обновляет включающий в себя поставщик Router, на который другие подписчики Routes в файле index.js не подписываются, и, следовательно, он работает неправильно.
Таким образом, вместо рендеринга различных элементов с помощью ReactDOM.render, вы можете сделать это просто так
import React from ‘react’; import ReactDOM from ‘react-dom’; import { BrowserRouter, Route, Switch } from ‘react-router-dom’; import Home from ‘./Home’; import Header from ‘./Header’; import Footer from ‘./Footer’; import Resume from ‘./Resume’; import * as serviceWorker from ‘./serviceWorker’; ReactDOM.render(( <BrowserRouter> <div> <div id=»header»> <Route component={Header} /> </div> <Switch> <Route exact path =»/» component={Home} /> <Route path =»/resume» component={Resume} /> </Switch> <div id=»footer»> <Route component={Footer} /> </div> </div> </BrowserRouter> ), document.getElementById(‘root’)); serviceWorker.unregister();
И Header.js
import React, { Component } from ‘react’; import bImg from ‘./img/moi2.jpg’; import { BrowserRouter, Link } from ‘react-router-dom’; /** * Composant définissant l’entête de la page (Navigation et la photo de début) * Link est utilisé à la place de <a> pour la gestion des routes. * @Author * @date 15th november 2018 */ class Header extends Component{ render(){ return( <div> <nav className=»navbar navbar-expand-lg navbar-light fixed-top» id=»mainNav»> <div className=»container»> <Link className=»navbar-brand» to=»/»>Iam Root</Link> <button className=»navbar-toggler navbar-toggler-right» type=»button» data-toggle=»collapse» data-target=»#navbarResponsive» aria-controls=»navbarResponsive» aria-expanded=»false» aria-label=»Toggle navigation»> Menu <i className=»fas fa-bars»></i> </button> <div className=»collapse navbar-collapse» id=»navbarResponsive»> <ul className=»navbar-nav ml-auto»> <li className=»nav-item»> <Link to=»/resume»>Mon CV</Link> </li> <li className=»nav-item»> <Link to=»/tutoriels»>Tutoriels</Link> </li> <li className=»nav-item»> <Link to=»/contact»>Contactez-moi</Link> </li> </ul> </div> </div> </nav> <header className=»masthead» style={{backgroundImage: ‘url(${bImg})’}}> <div className=»overlay»></div> <div className=»container»> <div className=»row»> <div className=»col-lg-8 col-md-10 mx-auto»> <div className=»site-heading»> <h1 style={{ opacity: 0.4}}>prenom nom</h1> <span className=»subheading»> Fonction </span> </div> </div> </div> </div> </header> </div> ); } } export default Header;
После внесения этого изменения ваше приложение должно работать как нужно
Ответ №1
Вы визуализируете заголовок и другую часть приложения отдельно, поскольку React Router фактически не знает о другой части вашего приложения, поэтому он не может перезагрузить страницу. Что вы должны сделать, это создать что-то вроде компонента макета и поместить все свои компоненты туда, чтобы вы могли иметь один BrowserRouter hoc.
