react-router-dom 使用导航

Question

I have a component, where i have to call navigate to main page, but navigate is not working, where is my fall? I know that userName is changing but redirect doesn't happening Index.js

  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>

App.js

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/login" element={<Login />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="/dashboard" element={<Dashboard />} />
    </Routes>
  )

Login.js

  const dispatch = useDispatch();
  const user = useSelector((store) => store.user);
  let navigate = useNavigate();
  const onSubmitForm = (e) => {
    e.preventDefault();
    dispatch({
      type: FETCH_USER,
      payload: { login: user.login, password: user.password },
    });
  }

  useEffect(() => {
    if(user.userName) {
      navigate("/login");
    }
  
  }, [user.userName])
  

Answer 1

I am not sure if it is the case but try changing the order of your paths to this:

return (
    <Switch>
      <Route path="/login" element={<Login />} />
      <Route path="/settings" element={<Settings />} />
      <Route path="/dashboard" element={<Dashboard />} />
      <Route path="/" element={<Home />} />
    </Switch>
  )

I had a similar thing before and somehow navigation was always navigating to the Home because path"/" was on top.

Also a small thing, I normally use the Routes with Switch. In my experience above structure should work