{
  "id": 18732123,
  "title": "Day 28 of My React Learning Journey - useContext,React router,BrowserRouter & useNavigate",
  "url": "https://urgent.news/2026/11/07/day-28-of-my-react-learning-journey-usecontext-react-router",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-11-07T14:51:35.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/saravanan_cn_183fcba7cc7a/day-28-of-my-react-learning-journey-usecontextreact-routerbrowserrouter-usenavigate-2onl"
  },
  "original_language": "en",
  "account": "On the 28th day of my React learning journey, I delved into the useContext hook, React Router, BrowserRouter, and useNavigate. The useContext component facilitates data sharing across components without the need for prop drilling. An example of its usage is shown below:\n\n```javascript\nimport {createContext,useContext} from react;\n\nconst UserContext = createContext();\n\nfunction App(){\nreturn (\n);\n}\n\nfunction Profile(){\nconst user = useContext(UserContext);\nreturn <div>Welcome{user}</div>;\n}\n\nexport default App;\n```\n\nReact Router is a library that manages navigation between different routes in a React application. For instance, an application may have a home page, about page, contact page, and login page. React Router determines which component to display based on the current URL.\n\nBrowserRouter is a router component that utilizes the browser's history API to manage navigation. It allows the use of conventional URLs such as: /home, /aboutus, and /contact. An example of its implementation is shown below:\n\n```javascript\nimport {BrowserRouter} from react-router-dom;\n\nfunction App(){\nreturn (\n// Routes will be placed here\n);\n}\n\nexport default App;\n```\n\nA route in React Router connects a URL path with a specific React component. For example:\n\n```javascript\nimport {BrowserRouter,Routes,Route} from react-router-dom;\n\nfunction Home(){\nreturn <div>Home Page</div>;\n}\n\nfunction About(){\nreturn <div>About Page</div>;\n}\n\nfunction App(){\nreturn (\n<Routes>\n<Route path=\"/\" element={<Home/>} />\n<Route path=\"/about\" element={<About/>} />\n</Routes>\n);\n}\n\nexport default App;\n```\n\nLink is used to navigate between different routes without reloading the entire page. For example:\n\n```javascript\nimport {Link} from react-router-dom;\n\nfunction Navbar(){\nreturn (\n<nav>\n<Link to=\"/home\">Home</Link>\n<Link to=\"/about\">About</Link>\n</nav>\n);\n}\n```\n\nThe useNavigate() hook is a React Router component used to navigate between routes programmatically. For instance, when submitting a login form, navigating to another page may be necessary. An example of its usage is shown below:\n\n```javascript\nimport {useNavigate} from react-router-dom;\n\nfunction Login(){\nconst navigate = useNavigate();\n\nfunction handleLogin(){\nnavigate('/home');\n}\n\nreturn (\n<button onClick={handleLogin}>Login</button>\n);\n}\n```\n\nIn this scenario, clicking the \"Login\" button navigates the user to the /home route. The difference between Link and useNavigate() is that Link is used for navigation through a link, typically in navigation bars, while useNavigate() is utilized for navigation through JavaScript, commonly after an action.",
  "summary": "React helps us to share data between components and navigate b/w different pages without reloading the entire website. 1.UseContext: It is a React Hook Component that allows to access shared data without passing props through every intermediate component and avoid props drilling. Example: `import {createContext,useContext} from \"react\"; const UserContext = createContext(); function App(){ return(…",
  "key_points": [
    "useContext hook enables data sharing without prop drilling",
    "React Router manages navigation between routes in a React app",
    "useNavigate() hook navigates between routes programmatically"
  ],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 1,
    "also_reported_by": []
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}