javascript - 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>像这样。

并用这种方法。我可以使用精确路径 Prop 。实际上，我现在很困惑，但现在我知道我应该搜索链接到和标签的区别。

这是我固定的 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>
    );
  }
}