使用react-router 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;

当我点击New Post而不是仅仅看到NewPost组件时，我还会看到FullPost组件。在这种情况下，我无法理解/ newpost路径和/：id路径是如何相同的。我知道这个问题可以通过Switch解决，但是我想知道为什么会发生这种情况。

Answer 1

这是因为，当你导航到/new-post时，两条路径路径相匹配。当你写：path="/:id"，id（一个可选的路由参数）可以是任何东西，数字，字符串等，所以id将成为/new-post，它也会渲染FullPost，这就是原因。

解决方法是，使用Switch（它将始终使用第一个匹配的路径渲染组件）来避免多个路径的匹配，以便在路径路径匹配时只渲染一个组件。像这样：

react-router

Answer 2

您需要将路线放在一个组件中。该开关仅渲染匹配的第一条路线。

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

这个答案在

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

如果不使用Switch，则匹配两个路由，因为/ new-post也被路由器视为id参数。