Несколько компонентов визуализируются для одного маршрута с реакции-маршрутизатором v4?

Question

Итак, я пытаюсь понять, почему в этом случае отображаются 2 маршрута одновременно:

import React, { Component } from 'react';
import { Route, NavLink, Switch } from 'react-router-dom';

import './Blog.css';
import Posts from './Posts/Posts';
import NewPost from './NewPost/NewPost';
import FullPost from './FullPost/FullPost'

class Blog extends Component {
    render () {
        return (
            <div className="Blog">
                <header>
                    <nav>
                        <ul>
                            <li><NavLink to="/" exact>Home</NavLink></li> 
                            <li><NavLink to= "/new-post">New Post</NavLink></li>
                        </ul>
                    </nav>
                </header>
                <Route path="/" exact component={Posts} />
                <Route path="/new-post" exact  component={NewPost} />
                <Route path="/:id" exact component={FullPost} />
            </div>
        );
    }
}
export default Blog;

Когда я нажимаю Новое сообщение вместо того, чтобы видеть только Компонент NewPost Я также вижу дополнительно Компонент FullPost . Я не могу понять, как пути / newpost и /: id одинаковы в этом случае. Я знаю, что эту проблему можно решить с помощью Switch, однако я хотел бы понять, почему это вообще происходит.

Answer 1

Вы должны поместить свои маршруты в компонент. Коммутатор будет отображать только первый соответствующий маршрут.

<Switch>
 <Route path="/" exact component={Posts} />
 <Route path="/new-post" exact  component={NewPost} />
 <Route path="/:id" exact component={FullPost} />
</Switch>

Этот ответ находится в Как предотвратить сопоставление двух маршрутов с response-router v4?

Когда вы не используете Switch, вы сопоставляете оба маршрута, потому что / new-post также рассматривается как параметр id вашим маршрутизатором.

Answer 2

Это потому, что, когда вы переходите к /new-post, два пути маршрута совпадают. Когда вы пишете: path="/:id", id (необязательный параметр маршрута) может быть любым, числом, строкой и т. Д., Поэтому id станет /new-post и будет также отображаться FullPost, поэтому.

Решение состоит в том, чтобы использовать Переключатель (он всегда будет отображать компонент с первым совпавшим путем) из react-router, чтобы избежать сопоставления нескольких путей, так что только один компонент будет отображаться при сопоставлении пути маршрута , Как это:

<Switch>
  <Route path="/" exact component={Posts} />
  <Route path="/new-post" exact  component={NewPost} />
  <Route path="/:id" exact component={FullPost} />
</Switch>