如果没有在 URL 更改上重新加载页面，React 不会呈现

Posted 2023-03-05

【中文标题】如果没有在 URL 更改上重新加载页面，React 不会呈现

【英文标题】：React doesn't render without Reloading the page on URL Change

【发布时间】：2020-07-28 01:15:39

【问题描述】：

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

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

我的代码如下： Navigate.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;

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;

OrderScreen.js

import React from 'react';

function OrderScreen() 
    return (
        <div Order Screen />
    );

export default OrderScreen;

点击完成并更改 URL 后重新加载时正在加载页面，但未重新加载它仍然显示 Dashboard 页面。

PS : 我已经从 App.js -> DashBoard.js 路由了这个，工作正常。

【问题讨论】：

你不应该有一个 <Router /> 包装你的每一个组件。它应该只位于组件树的顶层。那是你的问题； SalesDashBoard.js 中的链接与虚拟 DOM 树中最近的路由器相关联，并且该路由器实际上没有路由。

谢谢@101arrowz，现在我找到了逻辑问题和解决方案

【参考方案1】：

试试这个

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>

    )

【讨论】：

很高兴为您提供帮助 :)