如何替换以前的路径反应路由器dom

Question

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 ?

first path or register

got error since login path added to the register path

Answer 1

Did you wrap your <Route /> into a <Routes /> and a <BrowserRouter /> ?

Answer 2

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

Answer 3

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.