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

这是因为，当您导航到/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>
 <Route path="/" exact component={Posts} />
 <Route path="/new-post" exact  component={NewPost} />
 <Route path="/:id" exact component={FullPost} />
</Switch>

此答案在How to prevent matching two routes with react-router v4?

中

当您不使用Switch时，您会同时匹配两条路由，因为/ new-post也被路由器视为id参数。

使用react-router v4为单个路由呈现多个组件？

2 个答案: