react-router-dom 在当前页面上渲染新页面答案

【问题标题】：react-router-dom rendering new page over current pagereact-router-dom 在当前页面上渲染新页面
【发布时间】：2021-02-28 10:28:29
【问题描述】：

路由器域`

import React, { Component } from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
  } from "react-router-dom";
import Squall from '../pages/squall/Squall';

interface UserProps {
    name: string
    avatar: string
}

class User extends Component<UserProps> {

    constructor(props: UserProps) {
        super(props);
      }

    render() {
        return (
            <Router>
                <Link to="/">
                    Home
                </Link>
                <Link to="/squall">
                    <img src={this.props.avatar} alt={this.props.name}/>
                </Link>

                <Switch>
                    <Route path="/squall">
                        <Squall/>
                    </Route>
                    <Route path="/">
                        
                    </Route>
                </Switch>
            </Router>
        )
    }
}

export default User;

为什么当我单击带有<Link to="/squall"> 的元素时，它会将Squall 页面呈现在当前页面而不是新页面之上。 “当前页面”只是<App/>。我上网查了一下，解决方法是使用exact关键字，但还是不行。

【问题讨论】：

<Route path="/"> 是否正在渲染 App 组件？在这种情况下，“当前页面”是什么？该 URL 是否至少更新为您的 "/squall" 路径？
不，它只是为了让切换变得详尽无遗。如果我尝试在那里渲染<App/>，网站根本不会加载。 Chrome 提议终止无响应的网站。
所以App 被呈现在外部 Router？这可能就是为什么两者都在 <Route path="/squall"> 路径上呈现的原因。您能否提供更多Minimal, Complete, and Reproducible 代码示例？什么是渲染User组件，App在哪里渲染？
好的，我会的，我要去上班了，但我回来后会这样做。如果你不介意再看一下，我会告诉你的。谢谢。

标签： reactjs typescript web react-router-dom

【解决方案1】：

你应该用“/”添加到路径中，因为每个路径都包含“/”，所以它会被打印出来

 <Route exact path="/">
       <Component>                   
 </Route>

【讨论】：