Изменение компонента React Web

Question

Я новичок, чтобы реагировать, и я хочу знать, как изменить страницу, нажимая на ссылку / кнопку, я пробовал этот пакет npm: act-router-dom

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

import React, { Component } from "react";
import "jquery/dist/jquery.min.js";
import "bootstrap/dist/js/bootstrap.min.js";
import global from "../resource/global.json";
import { BrowserRouter as Router, Link } from "react-router-dom";

<div className="row" style={{ margin: "auto" }}>
            <div className="row float-left" style={{ margin: "auto" }}>
              <Router>
                <Link
                  to={""}
                  style={{
                    marginRight: "15px",
                    border: "none",
                    color: global.GUI.GRIGIOSCURO,
                    backgroundColor: "transparent",
                    textAlign: "center",
                    textDecoration: "none",
                    display: "inline-block"
                  }}
                >
                  Home
                </Link>
                <Link
                  to={"/terms"}
                  style={{
                    marginRight: "15px",
                    border: "none",
                    color: global.GUI.GRIGIOSCURO,
                    backgroundColor: "transparent",
                    textAlign: "center",
                    textDecoration: "none",
                    display: "inline-block"
                  }}
                >
                  Termini e Condizioni
                </Link>

                <Link
                  to={"/terms"}
                  style={{
                    backgroundColor: "transparent",
                    marginRight: "15px",
                    border: "none",
                    color: global.GUI.GRIGIOSCURO,
                    textAlign: "center",
                    textDecoration: "none",
                    display: "inline-block"
                  }}
                >
                  Privacy
                </Link>
              </Router>
            </div>

А вот мой каталог проекта:

public
|_icon.ico
|_index.html
|_manifest.json
|_src
   |_component 
      |_landing.jsx
      |_login.jsx
      |_terms.jsx

Я просто хочу перейти от посадки к условиям, нажав на кнопку ссылки, какие-либо предложения? Я делаю что-то неправильно? спасибо

Answer 1

Компонент, который реагирует на маршрутизатор для изменения страницы на основе URL-адреса, - <Route>. В вашем примере кода у вас нет ни одного из них, поэтому ваша страница никогда не изменится. Маршруты позволяют указать, что когда URL соответствует определенному шаблону, вы хотите, чтобы определенный компонент отображался.

Например, в разделе быстрого запуска ( найдено здесь ) есть упоминание о рендеринге маршрута

{/* A <Switch> looks through its children <Route>s and
  renders the first one that matches the current URL. */}
<Switch>
  <Route path="/about">
    <About />
  </Route>
  <Route path="/users">
    <Users />
  </Route>
  <Route path="/">
    <Home />
  </Route>
</Switch>

Этот код будет отображать компонент <About/>, еслиURL соответствует "/about", компонент <Users/>, если URL соответствует "/users", и компонент <Home/> в противном случае.