How to refresh the page when using a "Link to" in React router?

Question

A bit new to react & I'm trying to make a simple linear page flow. When the link is clicked in the Login component, I want it to go to the Select page without displaying the previous page. At its current state, the link simply adds the Select page without refreshing anything.

App code:

import Login from "./pages/Login";
import Select from "./pages/Select";
import { createBrowserHistory } from 'history'
//import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";

const history = createBrowserHistory()

function App() {
    return (
        <div className="fnb">
            <Router>
                <Switch>
                    <Route exact path="/" component={Login} />
                    <Route exact path="/select" component={Select} />
                </Switch>
            </Router>
        </div>
    );
}

export default App;

Login code:

import React from "react";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import Select from "./Select";

function Login() {
    return (
        <div>
            <p>
                this is the login
            </p>
            <Router>
                <Link to="/select" {window.location.reload();}>
                    go to select page
                </Link>

                <Switch>
                    <Route exact path="/select" component={Select}/>
                </Switch>
            </Router>
        </div>
    );
}

export default Login;

Select code:

import React from "react";

function Select() {
    return (
        <div>
            <header>
            <p>
                this is the select
            </p>
            </header>
        </div>
    );
}

export default Select;

`useHistory()` from react-router will be helpful if you want to handle with javascript. `let h = useHistory(); h.push("/select")`. This will send you to select page. Or if you want to refresh page only try using `useState` from react. See official docs to understand better. — Alok Prakash, Oct 27 '21 at 18:42
Hi. I'm not sure but I guess you have to define your `Router` and `Switch` only in `App.js` once. Then you just need to to use `Link` or `NavLink` And about refreshing: isn't this the whole point of React? — Getsumi3, Oct 27 '21 at 18:45

score 0 · Answer 1 · answered Oct 27 '21 at 19:11

0

https://stackoverflow.com/a/49162423/10787450 here is the answer. I think that exact param in the app component is the problem. Just remove it from Route.

answered Oct 27 '21 at 19:11

rabit ebibi

7
3

Add links to other Q&A as comment. – kann Oct 27 '21 at 19:13

Tamboli Rakesh · Answer 2 · 2021-10-28T03:36:08.487

you change file code

App code.

//App code  
import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Login from './pages/Login'
import Select from './pages/Select'
const App = () => {
    return (
        <Router>
            <Route exact path='/' component={Login} />
            <Route path='/select' component={Select} />
        </Router>
    )
}

export default App

//Login code
import React from 'react'
import { Link } from 'react-router-dom'
const Login = () => {
    return (
        <div>
            <p>this is the login</p>
            <Link to='/select'>go to select page</Link>
        </div>
    )
}
export default Login

//select code.
import React from 'react'
const Select = () => {
    return (
        <div>
            <header>
                <p>this is the select</p>
            </header>
        </div>
    )
}

export default Select

How to refresh the page when using a "Link to" in React router?

2 Answers2