Почему меняется мой URL, а не мой компонент?

Question

У меня есть следующие коды реакции:

App.js

import React from 'react';

import '../App.css';

import Header from "./Header"

function App() {
  return (
    <div className="App">
      <Header />
    </div>
  );
}

export default App;

Header.js

import React, {Component} from "react";
import { BrowserRouter as Router, Route, Link, Switch, withRouter } from "react-router-dom";

import Menu from "./Menu"
import Landing from "./Landing"
import ShowWeather from "./ShowWeather"
import PictureSlider from "./PictureSlider"

class Header extends Component {
  render() {
    return (
      <div>
      <Router>
        <div className="headerMain">
          <div className="headerShadow stickyHeader hidV">
            <div className="headerInner hidV posRel">
              <a href="#" className="aLogoBtn">
                <span>
                  <img className="siteLogo" src="https://img.mypage.com/knife.png" />
                  <span className="siteName">LT</span>
                </span>
              </a>
              <Menu />
            </div>
          </div>
        </div>
        <Switch>
          <Route exact component={withRouter(Landing)} pattern="/" />
          <Route component={withRouter(ShowWeather)} pattern="/ShowWeather" />
          <Route component={withRouter(PictureSlider)} pattern="/PictureSlider" />
        </Switch>
      </Router>
      </div>
    )
  }
}

export default Header

Menu.js

import React, {Component} from "react"
import { Link } from 'react-router-dom';

class Menu extends Component {
  render() {
    return (
      <div className="hidV posAbs" style={{"right": 0}}>
        <input type="checkbox" className="menu-btn" id="menu-btn" />
        <label htmlFor="menu-btn" className="menu-icon"><span className="navicon"></span></label>
        <ul className="menu">
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/ShowWeather">Weather</Link>
          </li>
          <li>
            <Link to="/PictureSlider">Picture Slider</Link>
          </li>
        </ul>
      </div>
    )
  }
}

export default Menu

Проблема, с которой я сталкиваюсь, заключается в том, что, когда я нажимаю на ссылку, URL-адрес изменяется, но компонент остается неизменным, он всегда отображает Landing компонент.

Я новичок в React, поэтому любая помощь будет принята.

Answer 1

Обновите ваши маршруты, как показано ниже -

<Switch>
   <Route exact component={withRouter(Landing)} path="/" />
   <Route component={withRouter(ShowWeather)} path="/ShowWeather" />
   <Route component={withRouter(PictureSlider)} path="/PictureSlider" />
</Switch>

Answer 2

Используйте path вместо pattern на Route компонентах.