路由更改页面上的渲染数据[反应路由器]

Question

我正在构建一个简单的新闻应用程序。这样可以获取并显示新故事和热门故事。

使用React Router我想在新故事和热门故事之间切换。到目前为止，我已经添加了路由，并在更改路由时为该路由获取了数据。但是，它不会重新呈现页面并显示数据。

我想在单击该页面的链接时显示新故事。

到目前为止，这里有我的代码

export default function App() {
  return (
    <Router>
      <div className='container'>
        <Nav />
        <main>
          <Switch>
            <Route exact path='/'>
              <StoriesPage url={topstoriesUrl} />
            </Route>
            <Route exact path='/new'>
              <StoriesPage url={newstoriesUrl} />
            </Route>
          </Switch>
        </main>
      </div>
    </Router>
  );
}

显示数据

export const StoriesPage = ({ url }) => {
  const [storyIds, setStoryIds] = useState([]);

  useEffect(() => {
    getStoryIds(url).then(data => setStoryIds(data));
  }, [url]);

  return (
    <div>
      {storyIds.map((storyId, index) => (
        <Story key={index} storyId={storyId} />
      ))}
    </div>
  );
};

和导航组件

export const Nav = () => {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to='/' activeClassName='active'>
            Top
          </NavLink>
        </li>
        <li>
          <NavLink to='/new' activeClassName='active'>
            New
          </NavLink>
        </li>
      </ul>
    </nav>
  );
};

我需要发生的事情：

单击导航链接。转到该页面并显示其数据。单击其他链接后，无需刷新即可显示该页面的数据。