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

Reactjs – React Router: Unable to Render Component When <nav> Doesn't Cover Entire App

I am facing an issue with rendering a component using React Router in my React TypeScript application. Specifically, I have a <nav> element that contains a link, and I want to navigate to the AddTask component when the link is clicked. The problem is that when I attempt to modify the code by removing the <nav> wrapper or replacing it with a <div> or <Router>, the component fails to render successfully. It only renders properly when the <nav> covers the entire application.

I would greatly appreciate any insights or suggestions on how to resolve this issue. Is there a specific configuration or modification that I need to make to ensure successful rendering of the AddTask component without having the <nav> cover the entire app?

Here is the code that runs successfully it displays a simple navbar

import { Component } from 'react';
import { Routes, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import 'bootstrap/dist/js/bootstrap.js';
import AddTask from './components/addtask';
import './App.css';

class App extends Component{
  render() {
    return (
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <div className="navbar-nav mr-auto">
          <a className="navbar-brand" href="#">Add</a>
        </div>
      </nav>
    );
  }
}

export default App;

When I modify the code to the following, it doesn’t render.

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.js';
import AddTask from './components/addtask';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand navbar-dark bg-dark">
          <div className="navbar-nav mr-auto">
            <Link to="/add" className="navbar-brand">Add</Link>
          </div>
        </nav>
        <Router>
          <Routes>
            <Route path="/add" element={<AddTask />} />
          </Routes>
        </Router>
      </div>
    );
  }
}

export default App;
Tags:

2

Answers


  1. 0

    You shouldn’t use Router directly according to the docs. Use BrowserRouter or HashRouter instead.

    The Router components provide the context for React Router, so all React Router components need to be rendered inside of one of those. You probably want the router to wrap your whole application. E.g.

    return (
  <BrowserRouter>
    <div>
      <nav className="navbar navbar-expand navbar-dark bg-dark">
        <div className="navbar-nav mr-auto">
          <Link to="/add" className="navbar-brand">Add</Link>
        </div>
      </nav>
      <Routes>
        <Route path="/add" element={<AddTask />} />
      </Routes>
    </div>
  </BrowserRouter>
);
    Login or Signup to reply.
  2. 0

    Issue

    The only issue I see with the code and can reproduce in a running sandbox is the Link being rendered outside a routing context.

    class App extends Component {
  render() {
    return (
      <div>
        <nav className="navbar navbar-expand navbar-dark bg-dark">
          <div className="navbar-nav mr-auto">
            <Link // <-- (2) No routing context provided from higher up
              to="/add"
              className="navbar-brand"
            >
              Add
            </Link>
          </div>
        </nav>
        <Router> // <-- (1) Provides routing context
          <Routes>
            <Route path="/add" element={<AddTask />} />
          </Routes>
        </Router>
      </div>
    );
  }
}

    Solution

    Wrap the nav element inside the Router component so the Link components it renders have a routing context available to them from higher up the ReactTree.

    Example:

    class App extends Component {
  render() {
    return (
      <div>
        <Router>
          <nav className="navbar navbar-expand navbar-dark bg-dark">
            <div className="navbar-nav mr-auto">
              <Link to="/add" className="navbar-brand">Add</Link>
            </div>
          </nav>
          <Routes>
            <Route path="/add" element={<AddTask />} />
          </Routes>
        </Router>
      </div>
    );
  }
}

    Edit react-router-unable-to-render-component-when-nav-doesnt-cover-entire-app

    enter image description here

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

Back To Top
Search