reactjs - React Router 未路由到 Route 元素中指定的路径
问题描述
在以下带有两个路由的 React 应用程序中,URL http://myapp正确路由到 Layout 组件。但是,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();
解决方案
因此,看来您必须小心为路由匹配正确指定了 basename 属性。"/" 匹配 "/login" 但 "~/" 不正确。考虑是否需要 basename 属性,如果需要,请仔细考虑其值。
推荐阅读
- eclipse - 如何让 Verilog 在 Eclipse 中运行?
- python - Python REST API 给出内部服务器错误
- firebase - 过滤最新的重复 Firebase 文档
- php - Laravel 将数据存储到数据透视表 eloquent
- json - Powershell - 解析不一致的 Json 数据
- php - 如何直接在 HTML Table 上编辑 JSON 数据?
- c++ - 如何检测 NULL 字符串或不是 NULL 字符串
- python - BeautifulSoup 对象未使用“html.parser”从网页中提取 html 标记
- perl - 我可以确定是否正在从终端运行 Perl 脚本吗?
- infinite-loop - 霍尔逻辑 | 当存在无限循环时,什么后置条件有效?