React Router 未路由到 Route 元素中指定的路径

Posted 2023-02-21

【中文标题】React Router 未路由到 Route 元素中指定的路径

【英文标题】：React Router not routing to path specified in Route element

【发布时间】：2019-08-05 12:54:21

【问题描述】：

在以下带有两个路由的 React 应用程序中，URL http://myapp 正确路由到布局组件。但是，URL http://myapp/login 也路由到 Layout 组件而不是 Login。如果我将 path="/login" 更改为 "/signin"，它会正确路由到 Login 组件。

React Router 中的“/login”路径有什么特别之处吗？还是我设置此路由的方式有误？

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import  AppContainer  from 'react-hot-loader';
import  BrowserRouter, Switch, Route  from 'react-router-dom';
import  Layout  from './components/Layout';
import  NotFound  from './components/NotFound';
import  Login  from './components/Login';

//Redux store
import  Provider  from "react-redux";
import store from "./store";

function renderApp() 

  ReactDOM.render(
    <Provider store=store>
      <BrowserRouter basename="/">
        <Switch>
          <Route exact path="/" component=Layout />
          <Route exact path="/login" component=Login />
          <Route component=NotFound />
        </Switch>
      </BrowserRouter>
    </Provider>,
    document.getElementById('react-app')
  );



renderApp();

【问题讨论】：

显示您的导航部分，如链接？

这似乎应该可以工作，我总是发现很难调试反应路由器，所以我的方法是随意移动东西。我不知道反应路由器中有任何特殊路由 - 只是为了理智，您可以将登录路由移动到交换机的顶部吗？您是导航直接登录还是单击链接访问它？

应用中没有导航链接。如果用户在浏览器中输入myapp/login，他们将获得登录组件，而myapp 将进入主页。这是因为我们希望一小部分用户登录并决定让 /login URL 更加谨慎，而不是在主页上设置登录链接。

Tom Finney - 我已将 /login 向上移动，但仍然不匹配。

@ChrisP 如果您从登录路径中取出确切的道具，它是否匹配？我总是发现路由问题最终总是超级简单/超级明显，之后让我觉得很傻。这似乎是一个完全有效的路由设置。您的登录组件中是否有什么特别之处，例如重定向或其他什么？

【参考方案1】：

因此，看来您必须小心为路由匹配正确指定了 basename 属性。 "/" 匹配 "/login" 但 "~/" 不正确。考虑是否需要 basename 属性，如果需要，请仔细考虑其值。