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;
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.
i trying to solve your change the 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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.