title: react Browserrouter not rendering component
body: <p>Am trying to make my react app into a multiple page app by using Browserrouter library but for some reason my component is not rendering when add the routing functionalities.</p>
  <p>Here is my index.js code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from "react"
  import ReactDOM  from "react-dom/client"
  // Component file
  import TodoContainer from "./functionBased/components/TodoContainer";
  //Stylesheet
  import "./functionBased/App.css"
  //React router dom
  import { BrowserRouter } from "react-router-dom";
  
  
  var root = ReactDOM.createRoot(document.getElementById("root"));
  
  root.render(
      &lt;React.StrictMode&gt;
          &lt;BrowserRouter &gt;
              &lt;TodoContainer /&gt;
          &lt;/BrowserRouter&gt;
      &lt;/React.StrictMode&gt;
  );</code></pre>
  </div>
  </div>
  </p>
  <p>When i add routing functionalities my app stop rendering</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>return (
      &lt;&gt;
          &lt;Routes&gt;
              &lt;Route exact path="/" element={&lt;TodoContainer/&gt;}&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="inner"&gt;
                          &lt;Header /&gt;
                          &lt;InputTodo addTodoProps={addTodoItem}/&gt;
                          &lt;TodosList 
                              todos={todos} 
                              handleChangeProps={handleChange}
                              deleteTodoProps={delTodo}
                              setUpdate={setUpdate}
                          /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/Route&gt;
              &lt;Route path="/about" element={&lt;About /&gt;}/&gt;
              &lt;Route path="*" element={&lt;NotMatch /&gt;}/&gt;
          &lt;/Routes&gt;
      &lt;/&gt;</code></pre>
  </div>
  </div>
  </p>