javascript - React js Router changes url but not loading page

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 ="/" ponent={Home} />
            <Route path ="/resume" ponent={Resume} />
        </Switch>
    </BrowserRouter>
), document.getElementById('root'));

ReactDOM.render(<Footer/>, document.getElementById('footer'));


serviceWorker.unregister();

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 ="/" ponent={Home} />
            <Route path ="/resume" ponent={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.

Share Improve this question asked Nov 18, 2018 at 11:49 Pakenfit 2001 gold badge5 silver badges16 bronze badges

Are you wrapping with any other HOCs? E.g. Redux? Sometimes that can cause issues. – Colin Ricardo Commented Nov 18, 2018 at 12:05
No I don't use Redux or something else. – Pakenfit Commented Nov 18, 2018 at 23:17

Add a ment |

3 Answers 3

Sorted by: Reset to default 2

You only need to have on BrowserRouter in your ponent 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 ponent 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 ponent={Header} />
          </div>
          <Switch>
              <Route exact path ="/" ponent={Home} />
              <Route path ="/resume" ponent={Resume} />
          </Switch>
          <div id="footer">
            <Route ponent={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

Switch was replaced with Routes when the v6 version of "react-router-dom" is installed.

Previous implementation with Switch:

import { Route, Switch } from 'react-router-dom';

function App() {
  return (
    <div>
      <MainNavigation />
      <Switch>
        <Route path='/' exact>
          <AllMeetupsPage />
        </Route>
        <Route path='/new-meetup'>
          <NewMeetupPage />
        </Route>
        <Route path='/favorites'>
          <FavoritesPage />
        </Route>
      </Switch>
    </div>
  );
}

Notice the addition of element attribute with Route which made the code less verbose.
New Implementation with Routes:

import { Route, Routes } from "react-router-dom";

function App() {
  return (
    <div>
      <MainNavigation />
      <Routes>
        <Route exact path="/" element={<AllMeetupsPage/>} />
        <Route path="/new-meetup" element={<NewMeetupPage/>} />
        <Route path="/favorites" element={<FavoritesPage/>} />
      </Routes>
    </div>
  );
}

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 ponent and put all your ponents there so that you can have single BrowserRouter hoc.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - React js Router changes url but not loading page - Stack Overflow

3 Answers 3

与本文相关的文章

评论列表(0)