遇到了一个比较紧急的问题,第一次在项目中用react-router-dom
,部署的时候出错了。
create-react-app生成的项目,我在项目中用了react-router-dom
, 打包的时候在package.json
中尝试配置了homepage
的值,设置成以下四种都没用,
"homepage": ".",
"homepage": "/",
"homepage": "http://mywebsite.com/relativepath",
"homepage": "http://mywebsite.com/relativepath/",
访问http://mywebsite.com/relativepath
显示如下:
dependencies
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"antd-mobile": "^2.3.4",
"babel-plugin-import": "^1.13.3",
"customize-cra": "^1.0.0",
"react": "^17.0.1",
"react-app-rewired": "^2.1.8",
"react-dom": "^17.0.1",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.1",
"web-vitals": "^0.2.4"
},
src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './styles/index.css';
import Main from './pages/Main';
import 'antd-mobile/dist/antd-mobile.css';
ReactDOM.render(
<React.StrictMode>
<Main />
</React.StrictMode>,
document.getElementById('root')
);
src/pages/main
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Index from './Index'
import Detail from './Detail'
function Main() {
return (
<Router>
<Route path="/" exact component={Index} />
<Route path="/detail/:type" exact component={Detail} />
</Router>
)
}
export default Main
官方文档
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…