I'm trying to create a dashboard structure, with redirect on button click to different ponents.

I am able to do the URL change, but still the page doesn't load without a hard reload on that url.

My code as Below : 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" ponent={SalesDashBoard}/>
                    <Route exact path="/salesDesk/OrderScreen" ponent={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
                        ponent={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;

The page is loading when reload after the click is done and URL is changed, without reloading its still showing the Dashboard page.

PS : I have already routing this from App.js -> DashBoard.js, Thats working fine.

I'm trying to create a dashboard structure, with redirect on button click to different ponents.

I am able to do the URL change, but still the page doesn't load without a hard reload on that url.

My code as Below : 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" ponent={SalesDashBoard}/>
                    <Route exact path="/salesDesk/OrderScreen" ponent={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
                        ponent={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;

The page is loading when reload after the click is done and URL is changed, without reloading its still showing the Dashboard page.

PS : I have already routing this from App.js -> DashBoard.js, Thats working fine.

• javascript
• reactjs
• react-router
• uirefreshcontrol

Share Improve this question Follow asked Apr 15, 2020 at 6:17 Bubashan_kushanBubashan_kushan 39288 silver badges2626 bronze badges 2

• You shouldn't have a <Router /> wrapping every one of your ponents. It should only be at the top level of your ponent tree. That's your issue; the link in SalesDashBoard.js is associated with the router closest in the virtual DOM tree, and that router literally has no routes. – 101arrowz Commented Apr 15, 2020 at 6:21
• Thanks @101arrowz, Now i found the logical issue and the solution – Bubashan_kushan Commented Apr 15, 2020 at 6:36

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

Try this

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

    )
}