react-router - 没有在反应路由器中获得组件的道具
问题描述
我想使用 React Component 来获取 id 匹配,但是在转到 url 时会出错:http://localhost:8080/portfolio/1并且对于其他 url 运行良好。错误 :
GET http://localhost:8080/portfolio/bundle.js 404 (Not Found) 1:1
Refused to execute script from 'http://localhost:8080/portfolio/bundle.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
AppRouter.js
import React from 'react';
import { BrowserRouter, Route, Switch, Link,NavLink } from 'react-router-dom';
import Home from '../Components/Home';
import Contact from '../Components/Contact';
import PortfolioItemPage from '../Components/PortfolioItemPage.js';
import NotFound from '../Components/NotFound.js';
import Header from '../Components/Header';
const AppRouter = () => (
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route path="/" component={Home} exact={true} />
<Route path="/portfolio/:id" component={PortfolioItemPage} />
<Route path="/contact" component={Contact}/>
<Route component={NotFound} />
</Switch>
</div>
</BrowserRouter>
);
export default AppRouter;
PortfolioItemPage.js
import React from 'react';
const PortfolioItemPage = (props) => {
console.log(props);
return (
<div>
<h1>Hii there...</h1>
</div>
);
};
export default PortfolioItemPage;
解决方案
看起来您的 App 尝试bundle.js
从相对路径加载http://localhost:8080/portfolio/
。
尝试添加<base href="/" />
到<html><head>
以强制您的应用从根 URL 加载资产。
推荐阅读
- r - R循环用牛顿法逼近正实数的平方根
- angular - 本机脚本。如何使用 png 图像创建自定义操作栏?
- informatica-powercenter - 在参数文件中设置参数并在同一工作流程中使用
- gradle - 使用 Gradle Kotlin DSL 构建源 jar?
- ms-access - 在 Access VBA 中,如何将自定义命名文件附加到 Outlook?
- python - 获取要删除的行的索引,其中两列为零
- ruby-on-rails - 是否可以将参数传递到模态窗口?需要模态来引用对象
- image - 如何在 Vich Uploader 中提交表单之前显示图像缩略图?
- spring - 模拟原型作用域bean
- shell - 用grep和wc同时过滤和统计结果