useHistory: 无法读取未定义的属性 (读取 ‘push’)

huangapple
go评论104阅读模式
英文:

useHistory: Cannot read properties of undefined (reading 'push')

问题

  1. import React from "react";
  2. import { Route, Switch, HashRouter, useHistory } from "react-router-dom";
  3. import Home from "../pages/home/HomeComponent";
  4. import Splash from "../pages/splash/Splash";
  5. import Education from "../pages/education/EducationComponent";
  6. import Experience from "../pages/experience/Experience";
  7. import Contact from "../pages/contact/ContactComponent";
  8. import Projects from "../pages/projects/Projects";
  9. import HobbiesPage from "../pages/hobbies/Hobbies";
  10. import { settings } from "../portfolio.js";
  11. import GamingPage from "../pages/gaming/gaming";
  12. import AnimePage from "../pages/anime/Anime";
  13. import { recognition } from "../components/speechRecognition/SpeechRecognition";
  15. export default function Main(propss) {
  16.   const history = useHistory();
  17.   recognition.onresult = (event) => {
  18.     const command = event.results[0][0].transcript;
  20.     if (command.includes("navigate to") || command.includes("go to")) {
  21.       if (command.includes("home") || command.includes("index")) {
  22.         history.push("/home");
  23.       } else if (command.includes("education") || command.includes("index")) {
  24.         history.push("/education");
  25.       } else if (command.includes("experience") || command.includes("index")) {
  26.         history.push("/experience");
  27.       } else if (command.includes("contact") || command.includes("index")) {
  28.         history.push("/contact");
  29.       }
  30.     }
  31.   };
  33.   recognition.onend = () => {
  34.     recognition.start();
  35.   };
  37.   if (settings.isSplash) {
  38.     return (
  39.       <div>
  40.         <HashRouter basename="/">
  41.           <Switch>
  42.             <Route
  43.               path="/"
  44.               exact
  45.               render={(props) => (
  46.                 <Splash
  47.                   {...props}
  48.                   theme={propss.theme}
  49.                   setTheme={propss.setTheme}
  50.                 />
  51.               )}
  52.             />
  53.             <Route
  54.               path="/home"
  55.               render={(props) => (
  56.                 <Home
  57.                   {...props}
  58.                   theme={propss.theme}
  59.                   setTheme={propss.setTheme}
  60.                 />
  61.               )}
  62.             />
  63.             <Route
  64.               path="/experience"
  65.               exact
  66.               render={(props) => (
  67.                 <Experience
  68.                   {...props}
  69.                   theme={propss.theme}
  70.                   setTheme={propss.setTheme}
  71.                 />
  72.               )}
  73.             />
  74.             <Route
  75.               path="/education"
  76.               render={(props) => (
  77.                 <Education
  78.                   {...props}
  79.                   theme={propss.theme}
  80.                   setTheme={propss.setTheme}
  81.                 />
  82.               )}
  83.             />
  84.             <Route
  85.               path="/contact"
  86.               render={(props) => (
  87.                 <Contact
  88.                   {...props}
  89.                   theme={propss.theme}
  90.                   setTheme={propss.setTheme}
  91.                 />
  92.               )}
  93.             />
  94.             <Route
  95.               path="/splash"
  96.               render={(props) => (
  97.                 <Splash
  98.                   {...props}
  99.                   theme={propss.theme}
  100.                   setTheme={propss.setTheme}
  101.                 />
  102.               )}
  103.             />
  104.             <Route
  105.               path="/projects"
  106.               render={(props) => (
  107.                 <Projects
  108.                   {...props}
  109.                   theme={propss.theme}
  110.                   setTheme={propss.setTheme}
  111.                 />
  112.               )}
  113.             />
  114.             <Route
  115.               path="/hobbies"
  116.               render={(props) => (
  117.                 <HobbiesPage
  118.                   {...props}
  119.                   theme={propss.theme}
  120.                   setTheme={propss.setTheme}
  121.                 />
  122.               )}
  123.             />
  124.             <Route
  125.               path="/gaming"
  126.               render={(props) => (
  127.                 <GamingPage
  128.                   {...props}
  129.                   theme={propss.theme}
  130.                   setTheme={propss.setTheme}
  131.                 />
  132.               )}
  133.             />
  134.             <Route
  135.               path="/anime"
  136.               render={(props) => (
  137.                 <AnimePage
  138.                   {...props}
  139.                   theme={propss.theme}
  140.                   setTheme={propss.setTheme}
  141.                 />
  142.               )}
  143.             />
  144.           </Switch>
  145.         </HashRouter>
  146.       </div>
  147.     );
  148.   } else {
  149.     return (
  150.       <div>
  151.         <HashRouter basename="/">
  152.           <Switch>
  153.             <Route
  154.               path="/"
  155.               exact
  156.               render={(props) => (
  157.                 <Home
  158.                   {...props}
  159.                   theme={propss.theme}
  160.                   setTheme={propss.setTheme}
  161.                 />
  162.               )}
  163.             />
  164.             <Route
  165.               path="/home"
  166.               render={(props) => (
  167.                 <Home
  168.                   {...props}
  169.                   theme={propss.theme}
  170.                   setTheme={propss.setTheme}
  171.                 />
  172.               )}
  173.             />
  174.             <Route
  175.               path="/experience"
  176.               exact
  177.               render={(props) => (
  178.                 <Experience
  179.                   {...props}
  180.                   theme={propss.theme}
  181.                   setTheme={propss.setTheme}
  182.                 />
  183.               )}
  184.             />
  185.             <Route
  186.               path="/education"
  187.               render={(props) => (
  188.                 <Education
  189.                   {...props}
  190.                   theme={propss.theme}
  191.                   setTheme={propss.setTheme}
  192.                 />
  193.               )}
  194.             />
  195.             <Route
  196.               path="/contact"
  197.               render={(props) => (
  198.                 <Contact
  199.                   {...props}
  200.                   theme={propss.theme}
  201.                   setTheme={propss.setTheme}
  202.                 />
  203.               )}
  204.             />
  205.             <Route
  206.               path="/projects"
  207.               render={(props) => (
  208.                 <Projects
  209.                   {...props}
  210.                   theme={propss.theme}
  211.                   setTheme={propss.setTheme}
  212.                 />
  213.               )}
  214.             />
  215.             <Route
  216.               path="/hobbies"
  217.               render={(props) => (
  218.                 <HobbiesPage
  219.                   {...props}
  220.                   theme={propss.theme}
  221.                   setTheme={propss.setTheme}
  222.                 />
  223.               )}
  224.             />
  225.             <Route
  226.               path="/gaming"
  227.               render={(props) => (
  228.                 <GamingPage
  229.                   {...props}
  230.                   theme={propss.theme}
  231.                   setTheme={propss.setTheme}
  232.                 />
  233.               )}
  234.             />
  235.             <Route
  236.               path="/anime"
  237.               render={(props) => (
  238.                 <AnimePage
  239.                   {...props}
  240.                   theme={propss.theme}
  241.                   setTheme={propss.setTheme}
  242.                 />
  243.               )}
  244.             />
  245.           </Switch>
  246.         </HashRouter>
  247.       </div>
  248.     );
  249.   }
  250. }
英文: 
  1. import React from &quot;react&quot;;
  2. import { Route, Switch, HashRouter, useHistory } from &quot;react-router-dom&quot;;
  3. import Home from &quot;../pages/home/HomeComponent&quot;;
  4. import Splash from &quot;../pages/splash/Splash&quot;;
  5. import Education from &quot;../pages/education/EducationComponent&quot;;
  6. import Experience from &quot;../pages/experience/Experience&quot;;
  7. import Contact from &quot;../pages/contact/ContactComponent&quot;;
  8. import Projects from &quot;../pages/projects/Projects&quot;;
  9. import HobbiesPage from &quot;../pages/hobbies/Hobbies&quot;;
  10. import { settings } from &quot;../portfolio.js&quot;;
  11. import GamingPage from &quot;../pages/gaming/gaming&quot;;
  12. import AnimePage from &quot;../pages/anime/Anime&quot;;
  13. import { recognition } from &quot;../components/speechRecognition/SpeechRecognition&quot;;
  15. export default function Main(propss) {
  16.   const history = useHistory();
  17.   recognition.onresult = (event) =&gt; {
  18.     const command = event.results[0][0].transcript;
  20.     if (command.includes(&quot;navigate to&quot;) || command.includes(&quot;go to&quot;)) {
  21.       if (command.includes(&quot;home&quot;) || command.includes(&quot;index&quot;)) {
  22.         history.push(&quot;/home&quot;);
  23.       } else if (command.includes(&quot;education&quot;) || command.includes(&quot;index&quot;)) {
  24.         history.push(&quot;/education&quot;);
  25.       } else if (command.includes(&quot;experience&quot;) || command.includes(&quot;index&quot;)) {
  26.         history.push(&quot;/experience&quot;);
  27.       } else if (command.includes(&quot;contact&quot;) || command.includes(&quot;index&quot;)) {
  28.         history.push(&quot;/contact&quot;);
  29.       }
  30.     }
  31.   };
  33.   recognition.onend = () =&gt; {
  34.     recognition.start();
  35.   };
  37.   if (settings.isSplash) {
  38.     return (
  39.       &lt;div&gt;
  40.         &lt;HashRouter basename=&quot;/&quot;&gt;
  41.           &lt;Switch&gt;
  42.             &lt;Route
  43.               path=&quot;/&quot;
  44.               exact
  45.               render={(props) =&gt; (
  46.                 &lt;Splash
  47.                   {...props}
  48.                   theme={propss.theme}
  49.                   setTheme={propss.setTheme}
  50.                 /&gt;
  51.               )}
  52.             /&gt;
  53.             &lt;Route
  54.               path=&quot;/home&quot;
  55.               render={(props) =&gt; (
  56.                 &lt;Home
  57.                   {...props}
  58.                   theme={propss.theme}
  59.                   setTheme={propss.setTheme}
  60.                 /&gt;
  61.               )}
  62.             /&gt;
  63.             &lt;Route
  64.               path=&quot;/experience&quot;
  65.               exact
  66.               render={(props) =&gt; (
  67.                 &lt;Experience
  68.                   {...props}
  69.                   theme={propss.theme}
  70.                   setTheme={propss.setTheme}
  71.                 /&gt;
  72.               )}
  73.             /&gt;
  74.             &lt;Route
  75.               path=&quot;/education&quot;
  76.               render={(props) =&gt; (
  77.                 &lt;Education
  78.                   {...props}
  79.                   theme={propss.theme}
  80.                   setTheme={propss.setTheme}
  81.                 /&gt;
  82.               )}
  83.             /&gt;
  84.             &lt;Route
  85.               path=&quot;/contact&quot;
  86.               render={(props) =&gt; (
  87.                 &lt;Contact
  88.                   {...props}
  89.                   theme={propss.theme}
  90.                   setTheme={propss.setTheme}
  91.                 /&gt;
  92.               )}
  93.             /&gt;
  94.             &lt;Route
  95.               path=&quot;/splash&quot;
  96.               render={(props) =&gt; (
  97.                 &lt;Splash
  98.                   {...props}
  99.                   theme={propss.theme}
  100.                   setTheme={propss.setTheme}
  101.                 /&gt;
  102.               )}
  103.             /&gt;
  104.             &lt;Route
  105.               path=&quot;/projects&quot;
  106.               render={(props) =&gt; (
  107.                 &lt;Projects
  108.                   {...props}
  109.                   theme={propss.theme}
  110.                   setTheme={propss.setTheme}
  111.                 /&gt;
  112.               )}
  113.             /&gt;
  114.             &lt;Route
  115.               path=&quot;/hobbies&quot;
  116.               render={(props) =&gt; (
  117.                 &lt;HobbiesPage
  118.                   {...props}
  119.                   theme={propss.theme}
  120.                   setTheme={propss.setTheme}
  121.                 /&gt;
  122.               )}
  123.             /&gt;
  124.             &lt;Route
  125.               path=&quot;/gaming&quot;
  126.               render={(props) =&gt; (
  127.                 &lt;GamingPage
  128.                   {...props}
  129.                   theme={propss.theme}
  130.                   setTheme={propss.setTheme}
  131.                 /&gt;
  132.               )}
  133.             /&gt;
  134.             &lt;Route
  135.               path=&quot;/anime&quot;
  136.               render={(props) =&gt; (
  137.                 &lt;AnimePage
  138.                   {...props}
  139.                   theme={propss.theme}
  140.                   setTheme={propss.setTheme}
  141.                 /&gt;
  142.               )}
  143.             /&gt;
  144.           &lt;/Switch&gt;
  145.         &lt;/HashRouter&gt;
  146.       &lt;/div&gt;
  147.     );
  148.   } else {
  149.     return (
  150.       &lt;div&gt;
  151.         &lt;HashRouter basename=&quot;/&quot;&gt;
  152.           &lt;Switch&gt;
  153.             &lt;Route
  154.               path=&quot;/&quot;
  155.               exact
  156.               render={(props) =&gt; (
  157.                 &lt;Home
  158.                   {...props}
  159.                   theme={propss.theme}
  160.                   setTheme={propss.setTheme}
  161.                 /&gt;
  162.               )}
  163.             /&gt;
  164.             &lt;Route
  165.               path=&quot;/home&quot;
  166.               render={(props) =&gt; (
  167.                 &lt;Home
  168.                   {...props}
  169.                   theme={propss.theme}
  170.                   setTheme={propss.setTheme}
  171.                 /&gt;
  172.               )}
  173.             /&gt;
  174.             &lt;Route
  175.               path=&quot;/experience&quot;
  176.               exact
  177.               render={(props) =&gt; (
  178.                 &lt;Experience
  179.                   {...props}
  180.                   theme={propss.theme}
  181.                   setTheme={propss.setTheme}
  182.                 /&gt;
  183.               )}
  184.             /&gt;
  185.             &lt;Route
  186.               path=&quot;/education&quot;
  187.               render={(props) =&gt; (
  188.                 &lt;Education
  189.                   {...props}
  190.                   theme={propss.theme}
  191.                   setTheme={propss.setTheme}
  192.                 /&gt;
  193.               )}
  194.             /&gt;
  195.             &lt;Route
  196.               path=&quot;/contact&quot;
  197.               render={(props) =&gt; (
  198.                 &lt;Contact
  199.                   {...props}
  200.                   theme={propss.theme}
  201.                   setTheme={propss.setTheme}
  202.                 /&gt;
  203.               )}
  204.             /&gt;
  205.             &lt;Route
  206.               path=&quot;/projects&quot;
  207.               render={(props) =&gt; (
  208.                 &lt;Projects
  209.                   {...props}
  210.                   theme={propss.theme}
  211.                   setTheme={propss.setTheme}
  212.                 /&gt;
  213.               )}
  214.             /&gt;
  215.             &lt;Route
  216.               path=&quot;/hobbies&quot;
  217.               render={(props) =&gt; (
  218.                 &lt;HobbiesPage
  219.                   {...props}
  220.                   theme={propss.theme}
  221.                   setTheme={propss.setTheme}
  222.                 /&gt;
  223.               )}
  224.             /&gt;
  225.             &lt;Route
  226.               path=&quot;/gaming&quot;
  227.               render={(props) =&gt; (
  228.                 &lt;GamingPage
  229.                   {...props}
  230.                   theme={propss.theme}
  231.                   setTheme={propss.setTheme}
  232.                 /&gt;
  233.               )}
  234.             /&gt;
  235.             &lt;Route
  236.               path=&quot;/anime&quot;
  237.               render={(props) =&gt; (
  238.                 &lt;AnimePage
  239.                   {...props}
  240.                   theme={propss.theme}
  241.                   setTheme={propss.setTheme}
  242.                 /&gt;
  243.               )}
  244.             /&gt;
  245.           &lt;/Switch&gt;
  246.         &lt;/HashRouter&gt;
  247.       &lt;/div&gt;
  248.     );
  249.   }
  250. }

> Uncaught TypeError: Cannot read properties of undefined (reading
> 'push')
> at Main.components_speechRecognition_SpeechRecognition__WEBPACK_IMPORTED_MODULE_12_.recognition.onresult
> (Main.js:22:1)
> Main.components_speechRecognition_SpeechRecognition__WEBPACK_IMPORTED_MODULE_12_.recognition.onresult
> @ Main.js:22

And

> VM338:2 Uncaught ReferenceError: process is not defined
> at 4043 (<anonymous>:2:13168)
> at r (<anonymous>:2:306599)
> at 8048 (<anonymous>:2:9496)
> at r (<anonymous>:2:306599)
> at 8641 (<anonymous>:2:1379)
> at r (<anonymous>:2:306599)
> at <anonymous>:2:315627
> at <anonymous>:2:324225
> at <anonymous>:2:324229
> at e.onload (index.js:1:1)

答案1

得分: 1

The useHistory hook needs a routing context provided above it in the ReactTree. Move the HashRouter to wrap this Main component so it has a defined history reference to use.

示例：

  1. import { HashRouter } from "react-router-dom";
  3. ...
  5. <HashRouter>
  6.   ...
  7.   <Main />
  8.   ...
  9. </HashRouter>
  1. import React from "react";
  2. import { Route, Switch, useHistory } from "react-router-dom";
  3. ...
  5. export default function Main(propss) {
  6.   const history = useHistory();
  8.   recognition.onresult = (event) => {
  9.     const command = event.results[0][0].transcript;
  11.     if (command.includes("navigate to") || command.includes("go to")) {
  12.       if (command.includes("home") || command.includes("index")) {
  13.         history.push("/home");
  14.       } else if (command.includes("education") || command.includes("index")) {
  15.         history.push("/education");
  16.       } else if (command.includes("experience") || command.includes("index")) {
  17.         history.push("/experience");
  18.       } else if (command.includes("contact") || command.includes("index")) {
  19.         history.push("/contact");
  20.       }
  21.     }
  22.   };
  24.   recognition.onend = () => {
  25.     recognition.start();
  26.   };
  28.   if (settings.isSplash) {
  29.     return (
  30.       <div>
  31.         <Switch>
  32.           ...
  33.         </Switch>
  34.       </div>
  35.     );
  36.   } else {
  37.     return (
  38.       <div>
  39.         <Switch>
  40.           ...
  41.         </Switch>
  42.       </div>
  43.     );
  44.   }
  45. }
英文:

The useHistory hook needs a routing context provided above it in the ReactTree. Move the HashRouter to wrap this Main component so it has a defined history reference to use.

Example:

  1. import { HashRouter } from &quot;react-router-dom&quot;;
  3. ...
  5. &lt;HashRouter&gt;
  6.   ...
  7.   &lt;Main /&gt;
  8.   ...
  9. &lt;/HashRouter&gt;
  1. import React from &quot;react&quot;;
  2. import { Route, Switch, useHistory } from &quot;react-router-dom&quot;;
  3. ...
  5. export default function Main(propss) {
  6.   const history = useHistory();
  8.   recognition.onresult = (event) =&gt; {
  9.     const command = event.results[0][0].transcript;
  11.     if (command.includes(&quot;navigate to&quot;) || command.includes(&quot;go to&quot;)) {
  12.       if (command.includes(&quot;home&quot;) || command.includes(&quot;index&quot;)) {
  13.         history.push(&quot;/home&quot;);
  14.       } else if (command.includes(&quot;education&quot;) || command.includes(&quot;index&quot;)) {
  15.         history.push(&quot;/education&quot;);
  16.       } else if (command.includes(&quot;experience&quot;) || command.includes(&quot;index&quot;)) {
  17.         history.push(&quot;/experience&quot;);
  18.       } else if (command.includes(&quot;contact&quot;) || command.includes(&quot;index&quot;)) {
  19.         history.push(&quot;/contact&quot;);
  20.       }
  21.     }
  22.   };
  24.   recognition.onend = () =&gt; {
  25.     recognition.start();
  26.   };
  28.   if (settings.isSplash) {
  29.     return (
  30.       &lt;div&gt;
  31.         &lt;Switch&gt;
  32.           ...
  33.         &lt;/Switch&gt;
  34.       &lt;/div&gt;
  35.     );
  36.   } else {
  37.     return (
  38.       &lt;div&gt;
  39.         &lt;Switch&gt;
  40.           ...
  41.         &lt;/Switch&gt;
  42.       &lt;/div&gt;
  43.     );
  44.   }
  45. }

huangapple
  • 本文由 发表于 2023年5月26日 08:53:46
  • 转载请务必保留本文链接：https://go.coder-hub.com/76337034.html
  • javascript
  • react-hooks
  • react-router
  • react-router-dom
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定