Javascript React.js路径确切路径不是wokring

我对routing 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")
);

从“React”导入React；
从“react dom”导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
导入“/。/scss/main.scss”；
从“/pages/Home.jsx”导入主页；
从“/pages/Users.jsx”导入用户；
从“/pages/auth/Login.jsx”导入登录名；
渲染(
,
document.getElementById（“应用程序”）
);

我创建菜单，点击它，其他链接都可以正常工作，但只有/auth/login URL不工作。 但如果我将URL更改为/login并在菜单URL中更改它，它就会工作。所以像/auth/login、/auth/example这样的多目录（？）不是wokring

---

如何解决此问题？

使用此方法解决。感谢评论中的帮助

问题来自jsx文件。起初我使用一个标记来路由它，但它应该是这样的

EXAMPLE

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

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

类用户扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
}
render（）{
返回(


家


使用者


登录




);
}
}

一个相关的问题。可能会帮助别人

只有当root（

/

）是

精确的

，而不是其他根（

/

）时，Mine才起作用：

  <Switch>
    <Route exact path="/" component={HomeIndexPage} />
    <Route path="/role" component={RoleIndexPage} />
    <Route path="/user" component={UserIndexPage} />
  </Switch>

---

如果你移除所有的道具，并在你的交换机中颠倒路线的顺序，怎么样？我认为这应该很好，“多目录”可以很好地与react路由器配合使用。你甚至可以把“foo/bar/thing/etc”放进去，这样就行了。你确定你的路线或菜单上没有打字错误吗？你能把菜单代码贴出来吗？问题一定出在别的地方了。多目录在react路由器中工作，没有问题。当你输入时，你能检查一下url中是否有输入错误吗？你可以在这里试试。另外，请创建一个具有可复制问题的工作样本，您可以使用codesandbox。因此，这将有助于解决这个问题

    import HomeIndexPage from './features/000.home/IndexPage';
    import RoleIndexPage from './features/100.role/IndexPage';
    import UserIndexPage from './features/101.user/IndexPage';