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;
CodePudding user response:
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.
CodePudding user response:
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
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>