URL меняется, но копонент не перезагружается - PullRequest
Новая
       28

URL меняется, но копонент не перезагружается

0 голосов
/ 23 января 2020

Я новичок в React и у меня проблема с React Router Dom. Я разрабатываю одностраничное приложение для моего резюме на практике, и у меня есть меню бургера, где я использовал «Ссылка», чтобы соответствовать хороший URL. Я хочу, чтобы по этим ссылкам загружался связанный компонент, но мне нужно обновить sh страницу, чтобы загрузить требуемый компонент.

Я прочитал много разных способов решения этой проблемы и пробовал большинство из них, но никто не помог мне решить мою проблему ..

Здесь приложение. js: 

import Formations from "./formations/formations";
import Experiences from "./experiences/experiences";
import BM from "./BM/BM";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
    withRouter,
} from "react-router-dom";

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Header />
              <p className="App-intro">{this.state.apiResponse}</p>
                <Router>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/formations" component={Formations} />
                            <Route path="/experiences" component={Experiences} />
                        </Switch>
                    </div>
                </Router>
                <div className="bottomPage">
                    <p>down page</p>
                </div>
            </div>
        );
    }
}

Мой компонент меню бургера находится в заголовочном файле.

Наконец, вот мое Burger Menu: 

import React from "react";
import { pushRotate as Menu } from "react-burger-menu";
import { BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'
import "./BM-styles.css";

class BM extends React.Component {
  render() {
    return (
      <Menu>
        <Router>
        <li><Link to="/" className="menu-item">
          Home
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/experiences" className="menu-item" >
          Expériences
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/formations" className="menu-item" >
          Formations
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/loisirs" className="menu-item">
          Loisirs
        </Link></li>
        </Router>
      </Menu>
    );
  }
}

export default BM;

Я уже пытался использовать «withRouter ()», но stll ничего не происходит ... Я думаю, это потому, что Link должен быть рядом с Switch и Router но как я могу это сделать? Если кто-то может мне помочь :) Спасибо

1 Ответ

0 голосов
/ 23 января 2020

Вы должны переместить <Header /> в Router, 

class App extends React.Component {
    render() {
        return (
            <div className="App">
                <Router>
                <Header />
                  <p className="App-intro">API response</p>
                    <div>
                        <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/formations" component={Formations} />
                            <Route path="/experiences" component={Experiences} />
                        </Switch>
                    </div>
                </Router>
                <div className="bottomPage">
                    <p>down page</p>
                </div>
            </div>
        );
    }
}

Удалить компонент <Router> из BM, 

class BM extends React.Component {
  render() {
    return (
      <Menu>
        <li><Link to="/" className="menu-item">
          Home
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/experiences" className="menu-item" >
          Expériences
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/formations" className="menu-item" >
          Formations
        </Link></li>
        <p className="bar">/</p>
        <li><Link to="/loisirs" className="menu-item">
          Loisirs
        </Link></li>
      </Menu>
    );
  }
}

Демо

...