尝试在Router Route上渲染组件，但其他组件正在显示

Question

我有一个表单，该表单的下面有一系列图像，当用户单击图像时，它应该显示该组件，该组件正常工作，但是当单击通配符/：id路由时，其他组件仍在显示用户单击我只想显示该组件的图像，其中将包含有关该组件的自定义详细信息...

我的app.js

const App = () => {
  const [file, setFiles] = useState({ selectedFile: null, loaded: 0 });
  const [title, setTitle] = useState("bob");
  const [description, setDescription] = useState("This is my first post.");


  const onChangeTitle = (event) => {
    setTitle(event.target.value)
  }

  const onChangeDescription = (event) => {
  setDescription(event.target.value)
}


const checkMimeType=(event)=>{
  //getting file object
  let files = event.target.files
  //define message container
  let err = [] // create empty array
  // list allow mime type
 const types = ['image/png', 'image/jpeg', 'image/gif']
  // loop access array
  for(let i = 0; i<files.length; i++) {
   // compare file type find doesn't matach
       if (types.every(type => files[i].type !== type)) {
       // create error message and assign to container
       err[i] = files[i].type+' is not a supported format\n';
     }
    };

         for (var z = 0; z < err.length; z++) { // loop create toast massage
             toast.error(err[z])
        event.target.value = null // discard selected file

    }

 return true;

  }


let maxSelectFile=(event)=>{
   let files = event.target.files // create file object
       if (files.length > 3) {
          const msg = 'Only 3 images can be uploaded at a time'
          event.target.value = null // discard selected file
          toast.warn(msg)
         return false;

     }
   return true;

    }

let checkFileSize=(event)=>{
     let files = event.target.files
     let size = 300000
     let err = "";
     for(var x = 0; x<files.length; x++) {
     if (files[x].size > size) {
      err += files[x].type+'is too large, please pick a smaller file\n';
    }
    };

 for(var z = 0; z<err.length; z++) {
 toast.error(err[z])
 event.target.value = null
    }
return true;

}



    const onChangeFile = event => {

        if (maxSelectFile(event) && checkMimeType(event) && checkFileSize(event)) {
            setFiles({
                selectedFile: event.target.files
            });
        }
            // console.log(event.target.files)

    }

    const submitFormHandle = event => {

        const data = new FormData();

            for (let i = 0; i < file.selectedFile.length; i++) {
                data.append("meme", file.selectedFile[i]);
      }
      data.set("title", title);
      data.set("description", description);

    axios
      .post("http://localhost:3200/api/posts/", data)
      .then(res => {
    toast.success('upload success')
})
.catch(err => {
    toast.error('upload fail')
})


    }


  return (

    <>


    <form onSubmit={submitFormHandle}>
          <div className="form-group">
             <ToastContainer />
      </div>

     <label htmlFor="formGroupExampleInput">Title</label>
     <input type="text" className="form-control" id="formGroupExampleInput" placeholder="Example input" onChange={onChangeTitle}/>


    <div className="form-group">
      <label htmlFor="comment">description</label>
      <textarea className="form-control" rows="5" id="comment" onChange={onChangeDescription}></textarea>
          </div>

          <div className="form-group files">

        <label htmlFor="exampleFormControlFile1">Upload Cat Memes</label>
        <input
          type="file"
          className="form-control"
          id="exampleFormControlFile1"
          multiple
          onChange={onChangeFile}
        />
          </div>

        <button type="submit" className="btn btn-primary">
            Submit
        </button>

    </form>

      <h3>View your posts</h3>
      <Posts />

    </>
  );
};

我有路由器，应该在不显示其他组件的情况下加载该组件，如您在此图像中看到的，它显示了来自该组件的“ Hi”，但图像和表单仍在显示

我的自定义ItemDetails组件

import React from 'react';

const ItemDetails = () => {
    return (
        <div>
            Hi
        </div>
    )
}

export default ItemDetails;

我的查看发布路线

const Posts = () => {

  let [posts, setPosts] = useState([])
  // console.log(posts)

      useEffect(() => {
        axios.get("http://localhost:3200/api/posts/")
            .then(({ data })=> {
      //  console.log('data====',data);
              setPosts(
         data
       );
     })
            .catch(err => {
              console.log(err);
            })
    }, []);


    return (
<Router>

     <Route exact path="/api/posts/item/:itemid" component={ItemDetails} />


  <ul className="flex-container wrap">
        {posts.map((item, index) => (
          <li className="flex-item" key={index}>
            <Link to={`/api/posts/item/${item._id}`}>
              <img
                src={item.image}
                alt="shows what this post is offering"
                style={{ width: 200, height: 300 }}
                onClick={() => window.location = `api/posts/item/${item._id}`}
              />
            </Link>
          </li>
        ))}
        </ul>
  </Router>

);


    }


export default Posts;