修改路由

package.json

 {
   "name": "zunyi-nutrition",
   "version": "0.1.0",
+  "homepage": "/yingyang",
   "private": true,
   "dependencies": {
     "react": "^16.9.0",

src/App.js

@@ -11,6 +11,8 @@ import tomatoGetCmp from './pages/tomato/getComponent';
 import cornGetCmp from './pages/corn/getComponent';
 import wheatGetCmp from './pages/wheat/getComponent';
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const config =  {
   rape: {
     elements: ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's'],
@@ -42,7 +44,7 @@ const routes = Object.keys(config).reduce((acc, category) => {
       <Route
         key={category + '-' + element}
         exact
-        path={`/${category}/lack-of-${element}`}
+        path={`${baseUrl}/${category}/lack-of-${element}`}
         component={Cmp}
       />
     );
@@ -50,7 +52,7 @@ const routes = Object.keys(config).reduce((acc, category) => {
       <Route
         key={category + '-' + element + '-info'}
         exact
-        path={`/${category}/lack-of-${element}/info`}
+        path={`${baseUrl}/${category}/lack-of-${element}/info`}
         component={() => <InfoCmp category={category} element={element} />}
       />
     );        
@@ -65,11 +67,11 @@ function App() {
   return (
     <Router>
       <Switch>
-        <Route exact path="/" component={Home} />
-        <Route exact path="/corn" component={Corn} />
-        <Route exact path="/rape" component={Rape} />
-        <Route exact path="/wheat" component={Wheat} />
-        <Route exact path="/tomato" component={Tomato} />
+        <Route exact path={baseUrl + "/"} component={Home} />
+        <Route exact path={baseUrl + "/corn"} component={Corn} />
+        <Route exact path={baseUrl + "/rape"} component={Rape} />
+        <Route exact path={baseUrl + "/wheat"} component={Wheat} />
+        <Route exact path={baseUrl + "/tomato"} component={Tomato} />
         { routes }
       </Switch>
     </Router>

src/components/BGWithNavBtn.js

@@ -7,6 +7,8 @@ import BackImg from '../仿真软件-植物营养元素缺素症切图/通用/
 import HomeImg from '../仿真软件-植物营养元素缺素症切图/通用/主页.png';
 import { convertpx2vw } from '../config';
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const StyledNavBtn = styled(AnimatedBtn)`
   bottom:  ${convertpx2vw(23)};
   position: absolute;
@@ -27,7 +29,7 @@ const BackBtn = withRouter(({ history }) => {
   return <StyledBackBtn bg={BackImg} to="#" onClick={e => handleClick(e)} />
 });
 
-const HomeBtn = () => <StyledHomeBtn bg={HomeImg} to="/" />
+const HomeBtn = () => <StyledHomeBtn bg={HomeImg} to={baseUrl+'/'} />
 
 export default function BGWithNavBtn({ className, children, bg }) {
   return (

src/pages/Home.js

@@ -8,6 +8,8 @@ import tomatoImg from '../仿真软件-植物营养元素缺素症切图/首页/
 import AnimatedBtn from '../components/AnimatedBtn';
 import { convertpx2vw } from '../config';
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const Container = styled(BackGround)`
   display: flex;
   flex-direction: row;
@@ -22,10 +24,10 @@ const StyledBtn = styled(AnimatedBtn)`
 export default function Home() {
   return (
     <Container>
-      <StyledBtn bg={CornImg} to='/corn' />
-      <StyledBtn bg={WheatImg}  to='/wheat' />
-      <StyledBtn bg={RapeImg}  to='/rape' />
-      <StyledBtn bg={tomatoImg}   to='/tomato' />
+      <StyledBtn bg={CornImg} to={baseUrl + '/corn'}/>
+      <StyledBtn bg={WheatImg}  to={baseUrl + '/wheat'} />
+      <StyledBtn bg={RapeImg}  to={baseUrl + '/rape'}/>
+      <StyledBtn bg={tomatoImg}   to={baseUrl + '/tomato'} />
     </Container>
   );
 }
\ No newline at end of file

src/pages/corn/getComponent.js

@@ -14,6 +14,8 @@ import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/1
 import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺钾.png'
 import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/1玉米/缺锌.png'
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const bgs = [
   LackNBg, LackPBg, LackKBg, LackZnBg, LackBBg
 ]
@@ -37,7 +39,7 @@ export default function (idx) {
     }
     const cornList = ['n', 'p', 'k', 'zn', 'b'];
     config.btns.rows[0][idx].correct = true;
-    config.btns.rows[0].forEach((ele, i) => ele.to = `/corn/lack-of-${cornList[i]}/info`);
+    config.btns.rows[0].forEach((ele, i) => ele.to = `${baseUrl}/corn/lack-of-${cornList[i]}/info`);
     return <CheckLack config={config} />;
   });
   return Component;

src/pages/rape/getComponent.js

@@ -20,6 +20,8 @@ import LackKBtnBg from '../../仿真软件-植物营养元素缺素症切图/3
 import LackZnBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺锌.png'
 import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/3油菜/缺镁.png'
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const bgs = [
   [
     LackNBg, LackPBg, LackKBg, LackGaBg
@@ -56,7 +58,7 @@ export default function (lackElement) {
     config.btns.rows[lackElement[0]][lackElement[1]].correct = true;
     config.btns.rows.forEach((r, i) => {
       r.forEach((ele, j) => {
-        ele.to = `/rape/lack-of-${rapeList[i][j]}/info`
+        ele.to = `${baseUrl}/rape/lack-of-${rapeList[i][j]}/info`
       });
     });
     return <CheckLack config={config} />;

src/pages/tomato/getComponent.js

@@ -22,6 +22,8 @@ import LackPBtnBg from '../../仿真软件-植物营养元素缺素症切图/4
 import LackMgBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺镁.png'
 import LackMuBtnBg from '../../仿真软件-植物营养元素缺素症切图/4西红柿/缺钼.png'
 
+const baseUrl = process.env.PUBLIC_URL;
+
 const bgs = [
   LackNBg, LackPBg, LackKBg, LackGaBg, LackMgBg, LackZnBg, LackBBg, LackSBg, LackMuBg,
 ];
@@ -46,7 +48,7 @@ export default function(idx) {
     config.btns.rows[0][idx].correct = true;
     const tomatoList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 's', 'mu'];
     config.btns.rows[0].forEach((ele, i) => {
-      ele.to = `/tomato/lack-of-${tomatoList[i]}/info`
+      ele.to = `${baseUrl}/tomato/lack-of-${tomatoList[i]}/info`
     });
     return <CheckLack config={config} />;
   });

src/pages/wheat/getComponent.js

@@ -24,6 +24,8 @@ import Mg_Btn_Bg from '../../仿真软件-植物营养元素缺素症切图/2小
 
 const bgs = [ N_Bg, P_Bg, K_Bg, Ga_Bg, Mg_Bg, Zn_Bg, B_Bg, Mn_Bg, Fe_Bg, ]
 
+const baseUrl = process.env.PUBLIC_URL;
+
 export default function (idx) {
   const Component = withRouter(({ match }) => {
     const to = match.url+'/info'
@@ -45,7 +47,7 @@ export default function (idx) {
     config.btns.rows[0][idx].correct = true;
     const wheatList = ['n', 'p', 'k', 'ga', 'mg', 'zn', 'b', 'mn', 'fe'];
     config.btns.rows[0].forEach((ele, i) => {
-      ele.to = `/wheat/lack-of-${wheatList[i]}/info`
+      ele.to = `${baseUrl}/wheat/lack-of-${wheatList[i]}/info`
     });
     return <CheckLack config={config} />;
   });