使用 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 component 我也看到了另外 完整Post 组件。在这种情况下，我无法理解 /newpost 路径和 /:id 路径是如何相同的。我知道这个问题可以用 Switch 解决，但是我想知道为什么会这样。

Answer 1

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

解决方案是，使用react-router中的Switch（它将始终渲染具有第一个匹配路径的组件）以避免匹配多个路径，这样只有一个组件会在路由上渲染路径匹配。像这样：

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

Answer 2

您需要将您的路由放在一个组件中。 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 参数。

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

Multiple components getting rendered for single route with react-router v4?

routes

path

reactjs

react-router-dom