React js 路由器更改 url 但未加载页面

Question

我有一个大问题，我正在使用 React BrowserRouter、Link 和 Switch 来管理我的网站路由，我的问题是当我点击 link 它会在 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's Resume
            </div>
        );
    }
}
export default Resume;

主页和页脚很简单 Resume.js

非常感谢您的帮助。

Answer 1

您正在分别呈现 header 和应用程序的其他部分，因为 React Router 实际上并不知道您应用程序的其他部分，因此它无法重新加载页面。你应该做的是创建类似布局组件的东西，并将所有组件放在那里，这样你就可以拥有一个 BrowserRouter hoc。

Answer 2

您只需要在您的组件中使用 BrowserRouter，以便所有路由都知道它们正在订阅哪个路由器，同时链接正在正确的路由器提供程序中更新数据。

在您的情况下，Header 和 Root 元素由不同的 BrowserRouter 包装，因此 Header 组件中的 Links 更新封闭的 Router Provider，另一个 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;

进行此更改后，您的应用程序应该可以正常工作

React js 路由器更改 url 但未加载页面

React js Router changes url but not loading page

javascript

reactjs

react-router-v4

react-router-dom