React router добавляет страницу наконец при маршрутизации

1

У меня есть два компонента: {App} и {Blog}, когда я пытался перейти на страницу Blog из приложения, на самом деле содержимое страницы блога было добавлено на последней странице приложения. Как я могу перейти на страницу блога с страницы приложения?

Маршрутизация:

const routes = (
  <BrowserRouter>
    <div>
      <Route path="/" component={App}/>
      <Route path="blog" component={Blog}/>
    </div>
  </BrowserRouter>
);


Meteor.startup(() => {
  ReactDOM.render(routes, document.querySelector(".render-target"));
});

Blog.js:

class Blog extends Component{
  render(){
    return(
      <div>Blog</div>
    );
  };
}

export default Blog; 
Теги:
react-router
meteor

1 ответ

4
Лучший ответ

Вам нужно использовать компонент Switch из реактивного маршрутизатора. Это позволит убедиться, что первый маршрут совпадает внутри.

<BrowserRouter>
    <Switch>
      <Route path="blog" component={Blog}/>
      <Route path="/" component={App}/>
    </Switch>
</BrowserRouter>

Как вы можете видеть в примере, поставьте маршрут блога до /. Если вы поместите маршрут/маршрут в качестве первого маршрута, он будет соответствовать этому маршруту на любом другом маршруте и остановится там.

Для получения дополнительной информации ознакомьтесь с этой частью

Ещё вопросы

Сообщество Overcoder
Наверх
Меню