Javascript 反应不'；在URL更改时，如果不重新加载页面，则无法进行渲染

我试图创建一个仪表板结构，在按钮点击时重定向到不同的组件

我可以更改URL，但如果没有对该URL进行硬加载，页面仍然无法加载

我的代码如下： 导航.JS

import React from 'react';
import {
    BrowserRouter as Router,
    Switch,
    Route,
} from "react-router-dom";
import SalesDashBoard from "./salesDashBoard";
import OrderScreen from "./OrderScreen";


function SDNavigator(){
    return(
        <div>
            <Router>
                <Switch>
                    <Route exact path="/salesDesk" component={SalesDashBoard}/>
                    <Route exact path="/salesDesk/OrderScreen" component={OrderScreen}/>
                </Switch>
            </Router>
        </div>
    )}
export default SDNavigator;

从“React”导入React；
进口{
BrowserRouter作为路由器，
转换
路线
}从“反应路由器dom”；
从“/SalesDashBoard”导入SalesDashBoard；
从“/OrderScreen”导入OrderScreen；
函数SDNavigator（）{
返回(
)}
导出默认SDNavigator；

SalesDashBoard.js

import React from 'react';
import {BrowserRouter as Router, Link} from "react-router-dom";
import Button from "@material-ui/core/Button";

function SalesDashBoard() {
    return (
        <Router>
            <div>
                <h3>Dashboard Links</h3>
                    <Button
                        component={Link} to="/salesDesk/OrderScreen"
                        variant="contained"
                        color="primary"
                        type="submit"
                    >
                        Login
                    </Button>
            </div>
        </Router>
    )
}

export default SalesDashBoard;

从“React”导入React；
从“react Router dom”导入{BrowserRouter as Router，Link}；
从“@物料界面/核心/按钮”导入按钮；
函数SalesDashBoard（）{
返回(
仪表板链接
登录
)
}
导出默认的SalesDashBoard；

OrderScreen.js

import React from 'react';

function OrderScreen() {
    return (
        <div Order Screen />
    );
}
export default OrderScreen;

从“React”导入React；
函数OrderScreen（）{
返回(
);
}
导出默认订单屏幕；

在单击完成并更改URL后重新加载时，页面正在加载，而不重新加载页面，仍然显示仪表板页面

PS：我已经从App.js->DashBoard.js发送了这个，工作正常。

试试这个

function SalesDashBoard() {
    return (
      // Remove Router
            <div>
                <h3>Dashboard Links</h3>
                    <Button
                        component={Link} to="/salesDesk/OrderScreen"
                        variant="contained"
                        color="primary"
                        type="submit"
                    >
                        Login
                    </Button>
            </div>

    )
}

函数SalesDashBoard（）{ 返回( //移除路由器 仪表板链接 登录 ) } 试试这个

function SalesDashBoard() {
    return (
      // Remove Router
            <div>
                <h3>Dashboard Links</h3>
                    <Button
                        component={Link} to="/salesDesk/OrderScreen"
                        variant="contained"
                        color="primary"
                        type="submit"
                    >
                        Login
                    </Button>
            </div>

    )
}

函数SalesDashBoard（）{ 返回( //移除路由器 仪表板链接 登录 ) }

---

您不应该让

包装每个组件。它应该仅位于组件树的顶层。这是你的问题；

SalesDashBoard.js

中的链接与虚拟DOM树中最近的路由器相关联，该路由器实际上没有路由。感谢@101arrowz，现在我发现了逻辑问题和解决方案您不应该让

包装您的每个组件。它应该仅位于组件树的顶层。这是你的问题；

SalesDashBoard.js

中的链接与虚拟DOM树中最近的路由器相关联，该路由器实际上没有路由。感谢@101arrowz，现在我发现了逻辑问题和解决方案乐于帮助：）乐于帮助：）