反应-路由器交换机未按预期工作
我正在学习REACTION,却被困在REACTION-ROUES
考虑以下事项:
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import HelloWorld from "./HelloWorld.jsx";
const Root = () => {
return (
<BrowserRouter>
<div>
<Switch>
<Route path="/" exact component={HelloWorld} />
<Route component={NoMatch} />
</Switch>
</div>
</BrowserRouter>
);
};
function NoMatch({ location }) {
return (
<div>
<h3>
No match found
</h3>
</div>
);
}
export default Root;
在‘/’此路线上,它按预期呈现HelloWorld
组件,但在其他路线上(例如abc
),它显示Cannot GET /abc
而不是No match found
解决方案
如果您使用create-react-app
设置Reaction项目,则代码运行正常,但如果您使用webpack配置手动设置项目,则需要devServer: {historyApiFallback: true,}
Reaction路由才能工作。
相关文章