Точный путь к маршруту React.js не работает

Question

У меня проблема с маршрутизацией React.js. Я хочу, чтобы URL был похож на http://localhost:3000/auth/login, но я не знаю, почему он не работает.

Вот мой код.

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./../scss/main.scss";

import Home from "./pages/Home.jsx";
import Users from "./pages/Users.jsx";
import Login from "./pages/auth/Login.jsx";

render(
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route exact path="/users" component={Users} />
      <Route exact path="/auth/login" component={Login} />
    </Switch>
  </Router>,
  document.getElementById("app")
);

Я создаю меню и нажимаю на него, и другие ссылкиработает нормально, но не работает только / auth / login URL. Но если я поменяю этот URL на / login и поменяю его в url меню, это сработает. Так что мультикаталог (?), Например / auth / login, / auth / example, не работает.

Как я могу решить эту проблему?

Answer 1

Решено с помощью этого метода. Спасибо за помощь в комментариях.

Проблема из файла jsx. Сначала я использую тег для маршрутизации, но он должен быть <Link to='/something/something'>EXAMPLE</Link> следующим образом.

И с этим методом. Я могу использовать точные реквизиты пути. На самом деле, я путаюсь прямо сейчас, но теперь я знаю, что мне следует поискать разницу между ссылкой и тегом.

И это мой фиксированный код jsx

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    return (
      <div className="navigation">
        <div className="menu">
          <ul>
            <li>
              <Link to="/">HOME</Link>
            </li>
            <li>
              <Link to="/users">Users</Link>
            </li>
            <li>
              <Link to="/auth/login">Login</Link>
            </li>
            <li>
              <a href="/auth/res">RES</a>
            </li>
          </ul>
        </div>
      </div>
    );
  }
}