Changing Component React Web

Question

I'm new to react and I want to know how to change page clicking on a link / button, I've tried this npm package: react-router-dom

The problem is that when I click on the link , the path in the url entry change but the page remains the same, here is landing page code:

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>

And here is my project directory:

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

I just want to go from landing to terms clicking on the link button, any suggestions? Am I doing something wrong? thanks

Answer 1

The component that react-router use for changing your page based on url is <Route>. In your example code you have none of those, so your page will never change. Routes let you specify that when the url matches a certain pattern, you want a certain component to be rendered.

For example, in the quick start section (found here) there is this mention of route rendering

{/* 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>

That code will render the <About/> component if the url matches "/about", the <Users/> component if the url matches "/users", and the <Home/> component otherwise.