javascript - 一个反应组件出现而不是预期的

Question

现在我的应用程序有问题。应用程序所做的是，只需按下按钮导航到另一个页面，或者播放声音并按下按钮导航到另一个页面。当我正在研究它时，我遇到了一个我不知道如何解决的问题。即使没有调用它，它也会显示一个组件。例如，当我按下一个显示地址为 localhost:3000/All 的按钮时，它应该显示 All.js 组件。但是，它显示了在 localhost:3000/Stop/Nt 中找到的完全不同的组件。我最初认为这是一个路由问题，但我找不到它可能出错的地方。我将在 Nt 页面下方发布正在显示的内容，而不是应该显示的内容。下面是我的路由器，我在想那里出了点问题......

行为不端的按钮

          <Button 
          className={classes.buttonStyles} 
          variant="outlined" 
          color="primary"
          startIcon={<Avatar src={'https://i.redd.it/w3kr4m2fi3111.png'} />}
          component={RouterLink}
          to="/All"
          >All
          </Button>

App.js（路由器）

import { BrowserRouter as Router, Switch, Route } from "react-router-dom"
import { Link as RouterLink } from 'react-router-dom';
import Badge from '@material-ui/core/Badge';
import React from "react"
import Home from "./Home"
import Eat from "./Eat/Eat"
import Condiment from "./Eat/Condiment"
import Dairy from "./Eat/Dairy"
import Fruit from "./Eat/Fruit"
import Meals from "./Eat/Meals"
import Meat from "./Eat/Meat"
import Snack from "./Eat/Snack"
import Vegetables from "./Eat/Vegetables"
import Play from "./Play/Play"
import Games from "./Play/Games"
import Lose from "./Play/Lose"
import Skip from "./Play/Skip"
import Slide from "./Play/Slide"
import Swing from "./Play/Swing"
import Toy from "./Play/Toy"
import Win from "./Play/Win"
import Match from "./Play/Match"
import Party from "./Play/Party"
import Difficult from"./Play/Difficult"
import He from "./Pronouns/He"
import I from "./Pronouns/I"
import It from "./Pronouns/It"
import Me from "./Pronouns/Me"
import My from "./Pronouns/My"
import She from "./Pronouns/She"
import Them from "./Pronouns/Them"
import Us from "./Pronouns/Us"
import We from "./Pronouns/We"
import You from "./Pronouns/You"
import Drink from "./Drink/Drink"
import Want from "./Want/Want"
import WantNt from "./Want/Nt"
import Time from "./Time/Time"
import TimeTime from "./Time/TimeTime"
import Calendar from "./Time/Calendar"
import TDate from "./Time/TDate"
import TimeNt from "./Time/TimeNt"
import Good from "./Good/Good"
import Great from "./Good/Great"
import Wonderful from "./Good/Wonderful"
import Bad from "./Bad/Bad"
import In from "./In/In"
import Not from "./Not/Not"
import Done from "./Done/Done"
import End from "./End/End"
import Direct from "./End/Direct"
import US from "./End/US"
import Work from "./Work/Work"
import And from "./And/And"
import That from "./That/That"
import There from "./There/There"
import Spell from "./Spell/Spell"
import Am from "./Am/Am"
import AmNt from "./Am/Nt"
import Watch from "./Watch/Watch"
import Read from "./Read/Read"
import ReadNt from "./Read/Nt"
import Material from "./Read/Material"
import Like from "./Like/Like"
import Do from "./Do/Do"
import DoNt from "./Do/Nt"
import Catch from "./Do/Catch"
import Dig from "./Do/Dig"
import Fold from "./Do/Fold"
import Hold from "./Do/Hold"
import Lay from "./Do/Lay"
import Pass from "./Do/Pass"
import Pick from "./Do/Pick"
import Point from "./Do/Point"
import Pull from "./Do/Pull"
import Push from "./Do/Push"
import Remember from "./Do/Remember"
import Roll from "./Do/Roll"
import Rough from "./Do/Rough"
import Smooth from "./Do/Smooth"
import Soft from "./Do/Soft"
import Throw from "./Do/Throw"
import Touch from "./Do/Touch"
import Wave from "./Do/Wave"
import Wrap from "./Do/Wrap"
import Find from "./Find/Find"
import Go from "./Go/Go"
import GoNt from "./Go/Nt"
import Building from "./Go/Building"
import Get from "./Get/Get"
import Help from "./Help/Help"
import Look from "./Look/Look"
import Talk from "./Talk/Talk"
import Think from "./Think/Think"
import Hear from "./Hear/Hear"
import Make from "./Make/Make"
import Need from "./Need/Need"
import Turn from "./Turn/Turn"
import Stop from "./Stop/Stop"
import StopNt from "./Stop/Nt"
import Fast from "./Fast/Fast"
import Slow from "./Slow/Slow"
import Love from "./Love/Love"
import New from "./New/New"
import Have from "./Have/Have"
import HaveNt from "./Have/Nt"
import Pay from "./Have/Pay"
import Actual from "./Have/Actual"
import Check from "./Have/Check"
import Cheap from "./Have/Cheap"
import Expensive from "./Have/Expensive"
import Own from "./Have/Own"
import Buy from "./Have/Buy" 
import Shop from "./Have/Shop"
import Inexpensive from "./Have/Inexpensive"
import Cost from "./Have/Cost"
import Change from "./Have/Change"
import Feel from "./Feel/Feel"
import All from "./All/All"
import AllNt from "./All/AllNt"
import Come from "./Come/Come"
import Color from "./Color/Color"
import Right from "./Right/Right"
import RightNt from "./Right/Nt"
import Said from "./Said/Said"
import Follow from "./Follow/Follow"
import Baby from "./Follow/Baby"
import People from "./Follow/People"
import Strange from "./Follow/Strange"
import Ride from "./Ride/Ride"
import Put from "./Put/Put"
import Wear from "./Wear/Wear"
import WearNt from "./Wear/Nt"
import Clothing from "./Wear/Clothing"
import WButton from "./Wear/WButton"
import Dress from "./Wear/Dress"
import Loose from "./Wear/Loose"
import Tie from "./Wear/Tie"
import Tight from "./Wear/Tight"
import Zip from "./Wear/Zip"
import Sit from "./Sit/Sit"
import Body from "./Body/Body"
import Left from "./Left/Left"
import Who from "./Who/Who"
import What from "./What/What"
import When from "./When/When"
import Where from "./Where/Where"
import Why from "./Why/Why"
import Count from "./Count/Count"
import Add from "./Count/Add"
import Subtract from "./Count/Subtract"
import Multiply from "./Count/Multiply"
import Divide from "./Count/Divide"
import Please from "./Please/Please"
import Shapes from "./Shapes/Shapes"
import Numbers from "./Numbers/Numbers"
import Letters from "./Letters/Letters"
import Weather from "./Weather/Weather"
import Animal from "./Animal/Animal"
import Template from "./template"
import Big from "./Big/Big"
import Strong from "./Big/Strong"
import Thick from "./Big/Thick"
import Heavy from "./Big/Heavy"
import Lift from "./Big/Lift"
import Drop from "./Big/Drop"
import Fat from "./Big/Fat"
import Powerful from "./Big/Powerful"
import BigNt from "./Big/Nt"
import Ask from "./Ask/Ask"
import Little from "./Little/Little"
import Weak from "./Little/Weak"
import Skinny from "./Little/Skinny"
import Thin from "./Little/Thin"

function App() {

  return (

    <div>
      <Router>
        <Switch>
          <Route exact path="/Template" component={Template}/>
          <Route exact path="/" component={Home}/>
          <Route exact path="/In" component={In}/>
          <Route exact path="/Big" component={Big}/>
          <Route exact path="/Big/Strong" component={Strong}/>
          <Route exact path="/Big/Thick" component={Thick}/>
          <Route exact path="/Big/Heavy" component={Heavy}/>
          <Route exact path="/Big/Lift" component={Lift}/>
          <Route exact path="/Big/Drop" component={Drop}/>
          <Route exact path="/Big/Fat" component={Fat}/>
          <Route exact path="/Big/Powerful" component={Powerful}/>
          <Route exact path="/Big/Nt" component={BigNt}/>
          <Route exact path="/Little" component={Little}/>
          <Route exact path="/Little/Weak" component={Weak}/>
          <Route exact path="/Little/Skinny" component={Skinny}/>
          <Route exact path="/Little/Thin" component={Thin}/>
          <Route exact path="/Ask" component={Ask}/>
          <Route exact path="/Eat" component={Eat}/>
          <Route exact path="/Eat/Condiment" component={Condiment}/>
          <Route exact path="/Eat/Dairy" component={Dairy}/>
          <Route exact path="/Eat/Fruit" component={Fruit}/>
          <Route exact path="/Eat/Meals" component={Meals}/>
          <Route exact path="/Eat/Meat" component={Meat}/>
          <Route exact path="/Eat/Snack" component={Snack}/>
          <Route exact path="/Eat/Vegetables" component={Vegetables}/>
          <Route exact path="/Play" component={Play}/>
          <Route exact path="/Play/Difficult" component={Difficult}/>
          <Route exact path="/Play/Games" component={Games}/>
          <Route exact path="/Play/Lose" component={Lose}/>
          <Route exact path="/Play/Match" component={Match}/>
          <Route exact path="/Play/Party" component={Party}/>
          <Route exact path="/Play/Skip" component={Skip}/>
          <Route exact path="/Play/Side" component={Slide}/>
          <Route exact path="/Play/Swing" component={Swing}/>
          <Route exact path="/Play/Toy" component={Toy}/>
          <Route exact path="/Play/Win" component={Win}/>
          <Route exact path="/He" component={He}/>
          <Route exact path="/I" component={I}/>
          <Route exact path="/It" component={It}/>
          <Route exact path="/Me" component={Me}/>
          <Route exact path="/My" component={My}/>
          <Route exact path="/She" component={She}/>
          <Route exact path="/Them" component={Them}/>
          <Route exact path="/Us" component={Us}/>
          <Route exact path="/We" component={We}/>
          <Route exact path="/You" component={You}/>
          <Route exact path="/Drink" component={Drink}/>
          <Route exact path="/Want" component={Want}/>
          <Route exact path="/Want/Nt" component={WantNt}/>
          <Route exact path="/Time" component={Time}/>
          <Route exact path="/Time/TimeTime" component={TimeTime}/>
          <Route exact path="/Time/Calendar" component={Calendar}/>
          <Route exact path="/Time/TDate" component={TDate}/>
          <Route exact path="/Time/TimeNt" component={TimeNt}/>
          <Route exact path="/Good" component={Good}/>
          <Route exact path="/Good/Great" component={Great}/>
          <Route exact path="/Good/Wonderful" component={Wonderful}/>
          <Route exact path="/Bad" component={Bad}/>
          <Route exact path="/Not" component={Not}/>
          <Route exact path="/Done" component={Done}/>
          <Route exact path="/End" component={End}/>
          <Route exact path="/End/Direct" component={Direct}/>
          <Route exact path="/End/US" component={US}/>
          <Route exact path="/Work" component={Work}/>
          <Route exact path="/Want" component={Want}/>
          <Route exact path="/And" component={And}/>
          <Route exact path="/That" component={That}/>
          <Route exact path="/There" component={There}/>
          <Route exact path="/Spell" component={Spell}/>
          <Route exact path="/Am" component={Am}/>
          <Route exact path="/Am/Nt" component={AmNt}/>
          <Route exact path="/Watch" component={Watch}/>
          <Route exact path="/Read" component={Read}/>
          <Route exact path="/Read/Nt" component={ReadNt}/>
          <Route exact path="/Read/Material" component={Material}/>
          <Route exact path="/Like" component={Like}/>
          <Route exact path="/Do" component={Do}/>
          <Route exact path="/Do/Nt" component={DoNt}/>
          <Route exact path="/Do/Catch" component={Catch}/>
          <Route exact path="/Do/Dig" component={Dig}/>
          <Route exact path="/Do/Fold" component={Fold}/>
          <Route exact path="/Do/Hold" component={Hold}/>
          <Route exact path="/Do/Lay" component={Lay}/>
          <Route exact path="/Do/Pass" component={Pass}/>
          <Route exact path="/Do/Pick" component={Pick}/>
          <Route exact path="/Do/Point" component={Point}/>
          <Route exact path="/Do/Pull" component={Pull}/>
          <Route exact path="/Do/Push" component={Push}/>
          <Route exact path="/Do/Remember" component={Remember}/>
          <Route exact path="/Do/Roll" component={Roll}/>
          <Route exact path="/Do/Rough" component={Rough}/>
          <Route exact path="/Do/Smooth" component={Smooth}/>
          <Route exact path="/Do/Soft" component={Soft}/>
          <Route exact path="/Do/Throw" component={Throw}/>
          <Route exact path="/Do/Touch" component={Touch}/>
          <Route exact path="/Do/Wave" component={Wave}/>
          <Route exact path="/Do/Wrap" component={Wrap}/>
          <Route exact path="/Find" component={Find}/>
          <Route exact path="/Go" component={Go}/>
          <Route exact path="/Go/Nt" component={GoNt}/>
          <Route exact path="/Go/Building" component={Building}/>
          <Route exact path="/Get" component={Get}/>
          <Route exact path="/Help" component={Help}/>
          <Route exact path="/Look" component={Look}/>
          <Route exact path="/Talk" component={Talk}/>
          <Route exact path="/Think" component={Think}/>
          <Route exact path="/Hear" component={Hear}/>
          <Route exact path="/Make" component={Make}/>
          <Route exact path="/Need" component={Need}/>
          <Route exact path="/Turn" component={Turn}/>
          <Route exact path="/Stop" component={Stop}/>
          <Route exact pat="/Stop/Nt" component={StopNt}/>
          <Route exact path="/Slow" component={Slow}/>
          <Route exact path="/Fast" component={Fast}/>
          <Route exact path="/Love" component={Love}/>
          <Route exact path="/Feel" component={Feel}/>
          <Route exact path="/New" component={New}/>
          <Route exact path="/Have" component={Have}/>
          <Route exact path="/Have/Nt" component={HaveNt}/>
          <Route exact path="/Have/Pay" component={Pay}/>
          <Route exact path="/Have/Actual" component={Actual}/>
          <Route exact path="/Have/Check" component={Check}/>
          <Route exact path="/Have/Cheap" component={Cheap}/>
          <Route exact path="/Have/Expensive" component={Expensive}/>
          <Route exact path="/Have/Own" component={Own}/>
          <Route exact path="/Have/Buy" component={Buy}/>
          <Route exact path="/Have/Shop" component={Shop}/>
          <Route exact path="/Have/Inexpensive" component={Inexpensive}/>
          <Route exact path="/Have/Cost" component={Cost}/>
          <Route exact path="/Have/Change" component={Change}/>
          <Route exact path="/All" component={All}/>
          <Route exact path="/All/AllNt" component={AllNt}/>
          <Route exact path="/Come" component={Come}/>
          <Route exact path="/Color" component={Color}/>
          <Route exact path="/Right" component={Right}/>
          <Route exact path="/Right/Nt" component={RightNt}/>
          <Route exact path="/Said" component={Said}/>
          <Route exact path="/Ride" component={Ride}/>
          <Route exact path="/Put" component={Put}/>
          <Route exact path="/Sit" component={Sit}/>
          <Route exact path="/Wear" component={Wear}/>
          <Route exact path="/Wear/Nt" component={WearNt}/>
          <Route exact path="/Wear/Clothing" component={Clothing}/>
          <Route exact path="/Wear/WButton" component={WButton}/>
          <Route exact path="/Wear/Dress" component={Dress}/>
          <Route exact path="/Wear/Loose" component={Loose}/>
          <Route exact path="/Wear/Tie" component={Tie}/>
          <Route exact path="/Wear/Tight" component={Tight}/>
          <Route exact path="/Wear/Zip" component={Zip}/>
          <Route exact path="/Body" component={Body}/>
          <Route exact path="/Left" component={Left}/>
          <Route exact path="/Who" component={Who}/>
          <Route exact path="/What" component={What}/>
          <Route exact path="/When" component={When}/>
          <Route exact path="/Where" component={Where}/>
          <Route exact path="/Why" component={Why}/>
          <Route exact path="/Count" component={Count}/>
          <Route exact path="/Count/Add" component={Add}/>
          <Route exact path="/Count/Subtract" component={Subtract}/>
          <Route exact path="/Count/Multiply" component={Multiply}/>
          <Route exact path="/Count/Divide" component={Divide}/>
          <Route exact path="/Please" component={Please}/>
          <Route exact path="/Shapes" component={Shapes}/>
          <Route exact path="/Numbers" component={Numbers}/>
          <Route exact path="/Letters" component={Letters}/>
          <Route exact path="/Weather" component={Weather}/>
          <Route exact path="/Animal" component={Animal}/>
          <Route exact path="/Follow" component={Follow}/>
          <Route exact path="/Follow/Baby" component={Baby}/>
          <Route exact path="/Follow/People" component={People}/>
          <Route exact path="/Follow/Strange" component={Strange}/>
        </Switch>
      </Router>
    </div>
  );
}

export default App;

标签： javascriptreactjsreact-router-dom

Answer 1

嘿，你这里有一个拼写错误：

<Route exact pat="/Stop/Nt" component={StopNt}/>

它应该是路径而不是拍拍。

<Route exact path="/Stop/Nt" component={StopNt}/>