改变组件 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&nbsp; renders the first one that matches the current URL. */}<Switch>&nbsp; <Route path="/about">&nbsp; &nbsp; <About />&nbsp; </Route>&nbsp; <Route path="/users">&nbsp; &nbsp; <Users />&nbsp; </Route>&nbsp; <Route path="/">&nbsp; &nbsp; <Home />&nbsp; </Route></Switch>该代码将使得<About/>如果URL匹配组件"/about"，该<Users/>组件如果URL匹配"/users"，和<Home/>组件除外。