改变组件 React Web

Question

我是新来的，我想知道如何通过点击链接/按钮来更改页面，我已经尝试过这个 npm 包：react-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>我只想从登陆到点击链接按钮的条款，有什么建议吗？难道我做错了什么？谢谢

Answer 1

react-router 用于根据 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/>组件除外。