javascript - React 路由器在客户端不工作。我如何解决它?
问题描述
我正在使用 React Browser Router,作为带有 create-react-app 的 npm 模块(react-router-dom)。路由在本地工作正常,但在部署后不行。 当按下链接时,我没有被带到所需的位置(例如 /start)。找不到该页面。
我看了这个技巧,但它仍然不起作用。
我没有使用 Heroku,我不知道我是否应该使用。
以下是我的 react App.js 中的一些代码片段:
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "./Components/Home.jsx";
import Billigast from "./Components/Billigast";
import NoMatch from "./Components/NoMatch";
import Start from "./Components/Start";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<NavBar />
<Switch>
<Route path="/" component={Home} exact />
<Route path="/start" component={Start} />
<Route component={NoMatch} />
</Switch>
</div>
</BrowserRouter>
);
}
}
静态.json:
{
"root": "/",
"clean_urls": false,
"routes": {
"/**": "index.html"
}
}
我已经尝试了几个"root":
位置。我的 index.html 文件位于根目录中。
这是链接页面之一:
import React from "react";
import NavBar from "./NavBar";
import Form from "./Form";
const Start = () => {
return (
<div>
<Form />
</div>
);
};
export default Start;
感谢您的任何帮助!
解决方案
我没有正确导入 react-router-dom NavLink。我正在导入 NavLink,但来自 reactstrap。
使固定(在 NavBar 组件中):
import { NavLink as RouterNavLink } from "react-router-dom";
因为 reactstrap 和 react-router-dom 都使用相同的名称(NavLink),并且由于设计原因我想同时使用它们。
然后我将 RouterNavLink 包装在 NavLink 中,如下所示:
<NavLink>
<RouterNavLink to="/start">Start</RouterNavLink>
</NavLink>
由于我什至没有正确导入,因此它不起作用也就不足为奇了。
另外,我不需要 static.json 文件。
推荐阅读
- solr - 由于拼写检查索引目录中的 write.lock,Solr 核心无法初始化
- javascript - 无法从我的 Go 服务器“保存”传入的 cookie
- c# - 增量中单个 + 前缀的含义
- hibernate - 使用关系数据库中的键值结构进行存储设置
- angular - Chrome 的撤消功能未注册下拉选择
- javascript - jQuery 最大调用堆栈大小超出,专注于下一个输入字段
- laravel - Laravel 将所有类型的错误重定向到自定义视图
- angular - 离子/角度问题找不到模块'./fs'
- javascript - PHP - ParseGeoPoint 上的 Parse SDK 查询无法正常工作
- sql-server - 如何使用点到站点连接 (P2S) 从我的笔记本电脑连接到 VNet 中的 Azure Sql 托管实例?