javascript - 反应路由器没有正确路由
问题描述
我有以下内容:
import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import Header from './layout/Header';
import Home from '../pages/Home';
import AboutUs from '../pages/Aboutus'
import { Layout } from 'antd';
class Main extends Component {
render() {
return (
<Layout className="layout">
<Header />
<Switch>
<Route path='/' component={Home} />
<Route path='/about' component={AboutUs} />
<Redirect to='/' />
</Switch>
</Layout>)
};
}
export default Main;
当访问 / 然后 Home 正确加载。访问不存在的路线时,会再次加载 Home,但访问 /about Home 时会加载而不是 AboutUs。
奇怪的是,如果我在访问时移动 AboutUs 组件而不是加载 Home,那么 AboutUs 运行良好
解决方案
你需要使用exact prop,因为“/”匹配任何以“/”开头的路由,基本上就是一切。 https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Route.md#exact-bool
推荐阅读
- php - 跳过特定变量的sql执行,以防它在php中为空
- firebase - 使用 Nuxt 的中间件进行用户重定向和身份验证
- perl - 如何对长列表进行分页
- android - Android APP 从 GCM 迁移到 FCM。旧 GCM 令牌不起作用
- jenkins - 使用 jenkins 远程 glassfish 部署失败
- ada - 为什么此 Ada 内存数据导出代码不起作用?
- python - 在 Django 模型中保存多对多对象?
- android - 缺少 Android Studio 3.3 Canary 13 附加到调试器按钮
- node.js - Kubernetes 丢弃由 node.js / postgres 初始化的 HTTP 连接
- sapui5 - 桌子上的数量为空时如何隐藏单位?