I am currently experiencing an issue with rendering a component in my React TypeScript application using React Router. The problem arises when trying to navigate to the AddTask component by clicking on a link within a <nav> element. Strangely, the component only renders successfully if the <nav> covers the entire application and fails otherwise when I attempt to modify the code by removing or replacing the wrapper.
I would appreciate any insights or suggestions on how to overcome this obstacle. Are there specific configurations or modifications that need to be made to ensure the proper rendering of the AddTask component without having the <nav> dominate the entire application?
The following code snippet 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;
However, when the code is modified as shown below, it fails to 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;