Отображать данные для страницы при изменении маршрута [реагировать на маршрутизатор] - PullRequest
Новая
       18

Отображать данные для страницы при изменении маршрута [реагировать на маршрутизатор]

0 голосов
/ 18 июня 2020

Я создаю простое новостное приложение. Это может извлекать и отображать новые истории и главные новости.

Используя реагирующий маршрутизатор, я хочу переключаться между новыми и главными статьями. Пока что я добавил маршрутизацию, и при изменении маршрута извлекаются данные для маршрута. Однако он не повторно отображает страницу и не отображает данные.

Я хочу отображать новые истории при нажатии на ссылку на эту страницу.

Вот мой код 

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>
  );
};

Что мне нужно сделать:

При нажатии на ссылку навигации. Go на эту страницу и отобразить данные для нее. При нажатии другой ссылки отображаются данные для этой страницы без необходимости обновлять sh.

...