ReactJS - React Router не изменяет компонент, но изменяется URL

Question

Я новичок в ReactJS и недавно начал учиться.Я создал 2 компонента home и ContactList, используя TSX.Я использую React-Router для изменения маршрута.

App.JS

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';

class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Menulink></Menulink>
        <Router>
          <switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

Menulink.tsx:

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <Router>
                <switch>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
                </switch>
            </Router>

        )
    }
}

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

Answer 1

Во-первых, вам нужно иметь один Router экземпляр

Во-вторых, MenuLink должен отображаться как дочерний элемент маршрутизатора

В-третьих, импортировать Switch из react-router-dom

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';



class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Router>
          <Route component={Menulink} />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </Switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

---

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <React.Fragment>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
            </React.Fragment>

        )
    }
}

Answer 2

Это потому, что у вас есть два разных экземпляра маршрутизатора.Вам нужен только один экземпляр маршрутизатора в верхней части иерархии компонентов.Или, по крайней мере, иерархию, которую вы ожидаете изменить с помощью URL.

Так что, если вы поместите свой <MenuLink /> в <Router>, который определяет маршруты, ваша маршрутизация будет работать нормально.