React.js 路由确切路径不起作用答案

【问题标题】：React.js route exact path is not wokringReact.js 路由确切路径不起作用
【发布时间】：2019-11-06 08:28:23
【问题描述】：

我在路由 React.js 时遇到问题。我想制作像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 不是 wokring。

我该如何解决这个问题？

【问题讨论】：

如果你删除所有确切的道具并颠倒你的开关中的路线顺序怎么样？我认为应该可以正常工作
“多目录”在 react 路由器上运行良好。你甚至可以输入“foo/bar/thing/etc”它会起作用。您确定您的路线或菜单中没有错字吗？你能把菜单代码贴出来吗？
问题肯定出在其他地方。 codesandbox.io/s/competent-matsumoto-gb2ho?fontsize=14
多目录在反应路由器中工作，没有问题。输入的时候能检查一下url里面有没有错别字吗
你可以在这里试用reacttraining.com/react-router/web/example/basic。还请创建一个具有可重现问题的工作示例，您可以使用代码和框。所以这将有助于解决问题

标签： javascript reactjs react-router

【解决方案1】：

用这个方法解决了。感谢 cmets 的帮助。

问题来自 jsx 文件。起初我使用标签来路由它，但它应该是<Link to='/something/something'>EXAMPLE</Link> 这样的。

用这种方法。我可以使用确切的路径道具。实际上，我现在很困惑，但现在我知道我应该搜索 Link to 和 tag 有什么区别。

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

【讨论】：

【解决方案2】：

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

只有当 root (/) 是 exact 时，我的才能工作，而其他人则不行：

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

进口是这样的：

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

【讨论】：