Reactjs 在React路由器中呈现组件不工作

我正在为一个需要快速的小企业开发一个库存管理系统，所以我使用React。我对react路由器不是最精通的，所以我遵循一个教程，使用我已经准备好的东西，而不是教程使用的简单的

h4

标题。然而，我在第一部分就被难倒了：设置路线。现在，我只是尝试设置路由，因此如果我键入localhost3000/ims，它将呈现InvSys组件。但是它不起作用

这是我的index.js：

import React from 'react';
import ReactDom from 'react-dom';
import './index.css'
import Nav from './Navbar'
import InvSys from './ItemSystem'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

function ItemList(){ //stateless functional component; needs to return JSX
  return (
  <Router>
    <div className="container">
      <Nav />
      <Route exact path="/" component={Home}/>
      <Route exact path="/ims" component={InvSys}/>
    </div>
  </Router>
  )
}

const Home = () => (
  <div className = 'container'>
    <h1>Mel-Tex I.M.S</h1>
  </div>
)

ReactDom.render(<ItemList />, document.getElementById('root') );

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”
从“/Navbar”导入导航
从“/ItemSystem”导入InvSys
从“react Router dom”导入{BrowserRouter as Router，Switch，Route}；
函数ItemList（）{//无状态函数组件；需要返回JSX
返回(
)
}
常量Home=（）=>(
Mel Tex I.M.S
)
ReactDom.render（，document.getElementById（'root'））；

这是我的InvSys：

import React, { useState } from 'react';
import './index.css';
// JS
// const input = document.getElementById('myText');
// const inputValue = input.value
// React
// value, onChange

const ItemSystem = () => {

  const[itemType,setItemType] = useState('')
  const[itemDesc,setItemDesc] = useState('')
  const[itemWeight,setItemWeight] = useState('')
  const[family,setFamily] = useState('')
  const[itemPrice,setItemPrice] = useState('')
  
  const[inventory,setInventory] = useState([])

  const handleSubmit = (e) => {
    e.preventDefault();
    if(itemDesc && itemType && itemWeight){
      const item ={id: new Date().getTime().toString(),itemType,itemDesc,itemWeight,family,itemPrice}
      setInventory((inventory)=>{
        return [...inventory,item]
      });
      setItemType('');
      setItemDesc('');
      setItemWeight('');
      setFamily('');
      setItemPrice('');
    }
  }

  return <>
  <article>

    <form className='form' onSubmit={handleSubmit}>
      <div className='form-control'>
        <label htmlFor='itemType'>Item Code: </label>
        <input
        type='text'
        id='itemType'
        name="itemType"
        value={itemType}
        onChange= {(e) => setItemType(e.target.value)}
        />

      </div>
      <div className='form-control'>
        <label htmlFor='itemDesc'>Item Desc: </label>
        <input
        type='text'
        id='itemDesc'
        name="itemDesc"
        value={itemDesc}
        onChange= {(e) => setItemDesc(e.target.value)}
        />
      </div>
      <div className='form-control'>
        <label htmlFor='itemWeight'>Item Weight: </label>
        <input
        type='text'
        id='itemWeight'
        name="itemWeight"
        value={itemWeight}
        onChange= {(e) => setItemWeight(e.target.value)}
        />
      </div>
      <div className='form-control'>
      <label htmlFor='family'>Item Family: </label>
      <input
      type='text'
      id='family'
      name="family"
      value={family}
      onChange= {(e) => setFamily(e.target.value)}
      />

    </div>
    <div className='form-control'>
      <label htmlFor='itemPrice'>List Price: </label>
      <input
      type='text'
      id='itemPrice'
      name="itemPrice"
      value={itemPrice}
      onChange= {(e) => setItemPrice(e.target.value)}
      />
    </div>
      <button type='submit'>Add Item </button>
    </form>
    <>
      <h3>Items Added</h3>
      {
        inventory.map((item) => {
          const {id, itemType, itemDesc, itemWeight, family, itemPrice} = item
          return <div key={id}>
            <h4>Item Code: {itemType}, Description: {itemDesc}, Weight: {itemWeight}, Family: {family} List Price: {itemPrice}</h4>


          </div>

      })
    }
    </>
  </article>
  </>;
};

export default ItemSystem;

import React，{useState}来自“React”；
导入“./index.css”；
//JS
//常量输入=document.getElementById（'myText'）；
//常量inputValue=input.value
//反应
//价值，一旦改变
const ItemSystem=（）=>{
常量[itemType，setItemType]=useState（“”）
const[itemDesc，setItemDesc]=useState（“”）
常量[itemWeight，setItemWeight]=useState（“”）
const[family，setFamily]=useState（“”）
常量[itemPrice，setItemPrice]=使用状态（“”）
const[inventory，setInventory]=useState（[]）
常量handleSubmit=（e）=>{
e、 预防默认值（）；
if（itemDesc&&itemType&&itemWeight）{
const item={id:new Date（）.getTime（）.toString（），itemType，itemDesc，itemWeight，family，itemPrice}
设置库存（（库存）=>{
退货[…库存、物品]
});
setItemType（“”）；
setItemDesc（“”）；
设置项权重（“”）；
setFamily（“”）；
setItemPrice（“”）；
}
}
返回
你能描述一下问题是什么吗？到底是什么不起作用？我猜你正在努力在
Nav
组件中实现导航，或者在
Home
和InvSys之间实现导航？现在，我只是想设置路由，所以如果我键入localhost3000/ims，它会显示InvSys不起作用吗？你看到的实际结果是什么？谢谢你的帮助。我想我会重新开始，先做路线，因为这似乎是让它们工作的最直接的方式。正如你所说的，可能在其他地方有一些东西坏了，至少如果我有所有的部分，我会继续前进。我看到了，实际上就是这样复制和粘贴都失败了。我认为这是依赖项出了问题，因为即使重新安装也不起作用。然而，重新开始后，一切又开始起作用了