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

React Router Links cause browser crash – Reactjs

So I’m just trying to use react-router-dom‘s Link component and whether it’s in my main project or a recreate, it just causes the browser to go blank and throws a console error of "react__WEBPACK_IMPORTED_MODULE_0__.useContext(...) is null".

The homepage is

import React from 'react';
import Nav from './Pages/Nav';
import { 
  createBrowserRouter,
  RouterProvider
} from 'react-router-dom';
import Home from './Pages/Home';
import Gallery from './Pages/Gallery';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />
  },
  {
    path: "/Gallery",
    element: <Gallery />
  },
])

function App() {
  return (
    <div>
      <Nav />
      <RouterProvider router={router} />
    </div>
  );
}

export default App;

and the link page is

import { Link } from 'react-router-dom';

const Nav = () => {
  return (
    <nav>
      <ul style={{ listStyle: "none" }}>
        <li style={{ cursor: "pointer" }}>
          <Link to='/'>Home</Link>
        </li>
        <li style={{ cursor: "pointer" }}>
          <Link to='/Gallery'>Gallery</Link>
        </li>
      </ul>
    </nav>
  )
}

export default Nav

Commenting out the Link components causes everything to work ok again.

Tags:

5

Answers


  1. 0

    I am not 100% sure if my suggestion will solve the issue but for what it’s worth here is what you can try:

    1 – Remove the space between the name and closing tag of the components like so:

    element:<Home />
element:<Gallery />
<RouterProvider router={router} />

    2 – You can remove the div element and wrap everything with BrowserRouter which you can import from "react-router-dom";

    Hope it works.

    Login or Signup to reply.
  2. 0

    Every component outside the router provider is outside the scope of react-router primitives so it fails because it cant perform the needed actions. You need something like this:

    import React from 'react';
import Nav from './Pages/Nav';
import { 
  createBrowserRouter,
  RouterProvider
 } from 'react-router-dom';
import Home from './Pages/Home';
import Gallery from './Pages/Gallery';

 const router = createBrowserRouter([
  {
    path:"/",
    element:<Home/>
  },
  {
    path:"/Gallery",
    element:<Gallery/>
  },
  {
    path:"/nav",
    element:<Nav/>

  }
 ])

function App() {
  return (
    <div>
      <RouterProvider router={router}/>

    </div>
  );
}

export default App;

    This way you can go to /nav and Links will work. Anyway, the best way is to add to the other components not to have a navigation page. So you have to include the nav in every element of your router.

    Login or Signup to reply.
  3. 0

    The Nav component is outside the RouterProvider context, you can fix it by changing the / path to a <Root> component and rendering the <Nav> and an <Outlet>, something like this:

    import { Outlet } from "react-router-dom";
// import Nav & Home

const Root = () => {

// it is better to use the react-router api:
const path = location.pathname

return <div><Nav/>{path === '/' ? <Home/> : <Outlet/>}</div>
}

export default Root;

    In App.js

    const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    children: [
      {
        path: "/gallery",
        element: <Gallery />,
      },
    ],
  },
]);
    Login or Signup to reply.
  4. 0

    The Nav component is rendered outside the routing context provided by the router component, RouterProvider in this case. All components that need to access the provided routing context necessarily need to be rendered under the provider in the ReactTree. In this case you’ll need to create a layout route that renders Nav and an Outlet for nested routes to render their content into.

    Example:

    import React from 'react';
import { 
  createBrowserRouter,
  RouterProvider,
  Outlet,
} from 'react-router-dom';
import Nav from './Pages/Nav';
import Home from './Pages/Home';
import Gallery from './Pages/Gallery';

const Layout = () => (
  <>
    <Nav />
    <Outlet /> // <-- nested routes render element content here
  </>
);

const router = createBrowserRouter([
  {
    element: <Layout />, // <-- Nav now inside context provider
    children: [
      {
        path: "/",
        element: <Home />
      },
      {
        path: "/Gallery",
        element: <Gallery />
      },
    ],
  },
]);

function App() {
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;
    Login or Signup to reply.
  5. 0

    Another way would be using BrowserRouter, Routes and Route like this:

    import { Navbar, Footer } from 'location';
import { Home, LoginPage } from 'location';

function App() {
return (
<>
  <BrowserRouter>
    <Navbar />
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/Login' element={<LoginPage />} />
      </Routes>
     <Footer />
  </BrowserRouter>
</>
);
}
export default App;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search