问题
I have a big problem, I'm using react BrowserRouter, Link and Switch to manage my website routing, my problem is that when I click on a link it changes on url but not in view, however when I refresh the page it works.
This is my Index.js page :
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();This is Header.js code:
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;This is my Resume.js code :
import React, { Component } from 'react';
class Resume extends Component{
render(){
return(
<div>
Hello x's Resume
</div>
);
}
}
export default Resume;Home and Footer are simple like Resume.js
Thank you a lot in advance for your help.
回答1:
You only need to have on BrowserRouter in your component so that all Routes are aware of which Router they are subscribing to and at the same time Links are updating data in the correct Router Provider.
In your case, Header and Root elements are wrapped by Different BrowserRouter and hence the Links in Header component update the enclosing Router Provider, which the other Routes in index.js file aren't subscribing to and hence it doesn't work correctly.
So instead of rendering different elements with ReactDOM.render, you can do it simply like
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();
And 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;
Once you make this change, your App should work as desired
回答2:
You are rendering header and the other part of the application separately because of that React Router actually isn't aware of the other part of your application so it isn't able to reload the page. What you should do is creating something like a layout component and put all your components there so that you can have single BrowserRouter hoc.
来源：https://stackoverflow.com/questions/53360520/react-js-router-changes-url-but-not-loading-page