Reactjs 使用react router v4为单个路由渲染多个组件？

因此，我试图理解为什么在本例中同时渲染两条路线：

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;

import React，{Component}来自'React'；
从“react router dom”导入{Route，NavLink，Switch}；
导入“/Blog.css”；
从“./Posts/Posts”导入帖子；
从“./NewPost/NewPost”导入NewPost；
从“./FullPost/FullPost”导入FullPost
类Blog扩展组件{
渲染（）{
返回(

主页
新职位

);
}
}
导出默认博客；

---

当我点击“新建帖子”时，除了看到“新建帖子”组件外，我还看到了“完整帖子”组件。我无法理解在这种情况下/newpost路径和/：id路径是如何相同的。我知道这个问题可以用Switch解决，但是我想知道为什么会发生这种情况。

这是因为，当您导航到

/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>

---

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

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

这个答案是正确的

当您不使用交换机时，您将匹配两条路由，因为/new post也被路由器视为id参数