So I am a little bit confused when I try to use react-router-dom
. How can we replace the previous path when navigating to a new path. Because the code is too long I will simplify it.
For example we are in a component of http://localhost:3000/register
and when user hit a button or change progmatically using useNavigate()
to another component of http://localhost:3000/login
. When I code and use navigate
it will error since there is no matching route at http://localhost:3000/register/login/
.
App.js
import './App.css';
import Login from './Pages/Login';
import Register from './Pages/Register';
function App() {
return (
<Routes>
<Route path='login' element={<Login/>} />
<Route path='register' element={<Register /> } />
</Routes>
);
}
export default App;
My code in register.js
after a click it should go to login page not add login to register path
import { Link, useNavigate } from 'react-router-dom'
const Register= () => {
return (
///remove the backslash for login didnt change anything
<Link style={{textDecoration:'none'}} to="/login">
<Button
sx={{marginTop:'10px',marginBottom:'10px'}}
variant="contained"
color='primary'
>
<Typography>
Login
</Typography>
</Button>
</Link>
)
}
export default Register
How to get rid of previous path in react-router-dom
?
Did you wrap your <Route />
into a <Routes />
and a <BrowserRouter />
?
component Link
have property replace, which one will indicate that, need to replace url
on to
- but if you don't use baseurl
in <Routes>
)
Also you can see guide about Link
- https://github.com/harryheman/React-Total/blob/main/md/react-router.md#link
Oke after I read a lot of friends answer It actually a bug, there is a useNavigate
in my code redirect to profile
component rather being on click.
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.