Question

我有一个大问题，我正在使用React 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's Resume
            </div>
        );
    }
}
export default Resume;

Home和Footer像Resume.js一样简单

非常感谢您的帮助。

Answer 1

您正在分别渲染标题和应用程序的另一部分，因为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 Router更改url但未加载页面

2 个答案: