I master React JS. Faced such a problem: when clicking on a link that is created by the Link component, the corresponding component specified in the router does not render. Those. The URL in the browser changes, and the page content remains the same.

Routes.js file

import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Home from './home'; import About from './about'; export default () => ( <div> <BrowserRouter> <Switch> <Route exact path='/' component={Home} /> <Route path='/about' component={About} /> </Switch> </BrowserRouter> </div> );

Footer.js file

 import React from 'react'; import { BrowserRouter, Link } from 'react-router-dom'; import CSSModules from 'react-css-modules'; import { grids } from 'pure-css'; let styles = {}; Object.assign( styles, grids ); class Footer extends React.Component { render() { return ( <div className="wide-panel-decoration"> <footer> <div className='pure-g'> <div className="pure-u-1-3"> &copy; Lab, 2018 </div> <div className="pure-u-1-3"> asdsd </div> <div className="pure-u-1-3"> <BrowserRouter> <nav> <Link to="/about">О проекте</Link> </nav> </BrowserRouter> </div> </div> </footer> </div> ); } } export default CSSModules( Footer, styles );
  • This most often happens when an error in the component, in your case in About, see the console - Dmitry Polyanin
  • Dmitry, the console is clean. No errors. Moreover. If you just go to the / about page, then the components will render correctly. - Skim

1 answer 1

Solution to the problem!

Link and Switch / Route were in different BrowserRouter, so Link did not find suitable routes, as they simply do not exist. Slightly changed the structure of the components and it all worked.

Modified routes.js file

 import React from 'react'; import { BrowserRouter, Route, Switch } from 'react-router-dom'; import Header from './header'; import Footer from './footer'; import Home from './home'; import About from './about'; export default () => ( <div> <BrowserRouter> <div> <Header/> <Switch> <Route exact path='/' component={Home} /> <Route path='/about' component={About} /> </Switch> <Footer/> </div> </BrowserRouter> </div> );