使用具有“提升状态”的 React 路由后无法显示信息

问：

我正在从教科书中学习 React Router，并且在使用 Lifting State Up 的新功能从 更改为 时遇到了问题。点击“新闻”链接后，我无法显示文本。下面显示了代码：SwitchRoutes

/* index.jsx */

    const rootElement = document.getElementById('root');
    const root = createRoot(rootElement);

    root.render(
    <HashRouter>

    <Routes>
      <Route path='/home' element={<Home />} />
      <Route path='/' element={<Home />} />
      <Route path='/about' element={<About />} />
      <Route path='/news' element={<News />} />
    </Routes>
    </HashRouter>,
    );

/* About.jsx */< - 好的代码

const About = () => (
<div>
  <Menu />
  <h1>這裡是關於我們 This is about us.</h1>
</div>
);

export default About;

/* News.jsx */<-问题来了。

const News = () => {
  const [news] = useState([
    { id: 1, name: 'News1', describe: 'A wins！' },
    { id: 2, name: 'News2', describe: 'B wins！' },
  ]);


  return (
    <div>

      <Menu />
      <Routes>
        <Route path='/news/*' element={<><p>hello!</p><NewsList 
news={news} /></>} />
        <Route path='newsReader/:id' element={<><NewsReader news ={news} /></>} />
      </Routes>

    </div>
  );
};

export default News;

它应该是这样的：

我相信问题出在，但找不到解决方案。<Route path>

代码和在这里：<NewsList><NewsReader>

const NewsList = props =>  (
        <ul>
            {
                props.news.map(theNews => (
                    <li key = {theNews.id}>
                        <Link to = {`/news/newsReader/${theNews.id}`}> 
   {theNews.name}</Link>
                    </li>
                ))
            }
        </ul>
    );


    export default NewsList;


    const NewsReader = (props) => {
       const {id:targetNewsId} = useParams();
       const targetNews = props.news.find(theNews => (
        String(theNews.id) === String(targetNewsId)
       ));

        return(
            <div>
                <h1>你正在閱讀 You are now reading {targetNews.name}</h1>
                <p>{targetNews.describe}</p>
            </div>
        )
    }

export default NewsReader;

非常感谢您的回答。