When I react-router to change the page, the rendering isn't work with React

Question

I want make the new List page with news.json file that I made it.

As you see below, make the list with map at the same time I made the Link href with ${item.id}

item.is represent news1, news2, new3.. etc. and I made each new1.js, new2.js to link with it.

but when I did it it didn't show any body. I think there is problem for rendering.

I already have googled it and found stackoverflow posting, it said router need key.. something like that but still I don't get it.

how I change my code???

const NewWrap =()=>{
  const articleWrapper = news.map((item)=>{
    return(
      <Li key ={item.id}>
        
        <img src={item.img} alt="img"  style ={{width:"260px", height:"200px", padding:"1rem"}}/>
        **<Link to={`/${item.id}`}** style={{textDecoration:"none", color:"black"}}>
          <div style={{padding:"1rem", textAlign:"left", cursor:"pointer"}}>
            <p>{item.title}</p>
            <p>{item.content.substring(0,305)}...</p>
            <p >{item.date}</p>
          </div>
        </Link>
      </Li>
      
      )
    });
    return(
      <Ul>
      {articleWrapper}
    </Ul>
  )
}

const News = () => {
  
  return (
    <div>
     
      <ImgBox>
        <Img src ="../img/bg_mian_01.png"/>
        <ImgText>News and Partners</ImgText>
      </ImgBox>
      
      <ConBox>
        <Subtitle>NEWS</Subtitle> 
        <NewWrap/>

      </ConBox>
      <Switch>
        <Route path="/new1" component={New1}/>
      </Switch>
    </div>
  
  );
};

export default News;

Answer 1

In the latest version of React Router (v6) you no longer use a Switch and you have to specify an element instead of a component.

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

<Router>
  <Routes>
    <Route path="/new1" element={<New1 />} />
  </Routes>
</Router>