Question 213595 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Redirecting in latest react-router-dom

import "./app.css";
import Sidebar from "./components/sidebar/Sidebar";
import Topbar from "./components/topbar/Topbar";
import Home from "./pages/home/Home";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import UserList from "./pages/userList/UserList";
import User from "./pages/user/User";
import NewUser from "./pages/newUser/NewUser";
import ProductList from "./pages/productList/ProductList";
import Product from "./pages/product/Product";
import NewProduct from "./pages/newProduct/NewProduct";
import Login from "./pages/login/Login";
import WithTopbar from "./components/withTopbar/WithTopbar";
import { useContext } from "react";
import { AuthContext } from "./context/authContext/AuthContext";

function App() {
  const { user } = useContext(AuthContext);
  return (
    <div className="App">
      <Router>
        <WithTopbar>
          <Topbar />
        </WithTopbar>
        <div className="container">
          <WithTopbar>
            <Sidebar />
          </WithTopbar>

          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route path="/login" element={<Login />} />
            <Route path="/Users" element={<UserList />} />
            <Route path="/User/:userId" element={<User />} />
            <Route path="/newUser" element={<NewUser />} />
            <Route path="/movies" element={<ProductList />} />
            <Route path="/movie/:movieId" element={<Product />} />
            <Route path="/newMovie" element={<NewProduct />} />
          </Routes>
        </div>
      </Router>
    </div>
  );
}

export default App;

#HI I am struck in a problem I am trying to Redirect to "/" page after getting user from login page page but I don’t know how to do this is latest version of react I am trying to redirect my users from login page to home page But I cannot understand how to do that

Tags:

2

Answers


  1. 0

    You can do it programmatically using useNavigate hook.

    import { useNavigate } from "react-router-dom";

...

const navigate = useNavigate();

...

navigate("/");
    Login or Signup to reply.
  2. 0

    In the latest version react-router-dom@6, you can simply use the useNavigate() hook to redirect to another page.

    The useNavigate hook returns a function that lets you navigate programmatically, for example:

    import { useNavigate } from "react-router-dom";

const navigate = useNavigate();
...
navigate('/', {userId: id});

    Basically, this navigate function takes two parameters. The first one is declaring a path "/" to tell where to navigate and the second parameter is optional where you can pass some states if you want.

    To explore more, simply can check their doc – https://reactrouter.com/en/main/hooks/use-navigate

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search