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

Question

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

我可以进行 URL 更改，但如果不重新加载 url，页面仍然无法加载 url。

我的代码如下： 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 已更改，无需重新加载仍显示仪表板页面。

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

Answer 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>

    )
}

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

React doesn't render without Reloading the page on URL Change

javascript

reactjs

react-router

uirefreshcontrol