Blank page in react after using navigation

user_19439843 0
Viewed 122

I created a React app and it ran perfectly fine with simple HTML/CSS a header and a button. But when I added <Routes>, <Route> and navigation.navigate, I get a blank screen with no errors in the console that I used to run the app. However, there is an error in the browser console, stating "Cannot read property of undefined 'getElementById".

I have tried giving the main parent div id='root' as that is the variable that was passed to getElementById. I am not sure what other solutions to try as other questions have had different situations/contexts.

Sample code is here https://codesandbox.io/s/frosty-fast-zqcn83?file=/src/index.js . You can see the error message, and if you exit it, you can see the blank screen (with the colour that I chose).

Code:

import './App.css';
import {Routes, Route, Router, useNavigate, NavLink, Link, BrowserRouter} from 'react-router-dom';
import Newpage from './screens/Newpage.js'

function App() {
  let navigate = useNavigate();
  function navigateToCloset(){
    navigate(Newpage);
  }

  const About = () => (
    <div className='about'>
      <h1>About Me</h1>
      <p>Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum molestias?</p>
      <p>Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum molestias?</p>
    </div>
  );

  const Contact = () => (
    <div className='contact'>
      <h1>Contact Me</h1>
      <p>You can reach me via email: <strong>hello@example.com</strong></p>
    </div>
  );

  return (
    <BrowserRouter>
    <div id='root'>
      <div className='header'>
        My Closet
      </div>
      <div className='homepagebuttondiv'>
        <button className='homepagebutton'
        onClick={navigateToCloset}
        >
          Enter Closet
        </button>
        <button className='homepagebutton'>
          New Clothing
        </button>
        </div>
        <Routes>
          <Route path="about" element={<About />}/>
          <Route path="contact" element={<Contact />} />
    </Routes>

        <nav>
          {/* <Link to="/">home?</Link> */}
          <Link to="/about">About</Link>
        </nav>



    </div>
  </BrowserRouter>
  );
}

export default App;
reactjs javascript
3 Answers

Are you trying to navigate to a different page?

If so try using react-router-dom

Here's the link to the documentation https://github.com/remix-run/react-router/blob/main/docs/getting-started/tutorial.md

EDIT: You should use the changes that Agrim provided. But i would also Add the <Router> to wrap the app. This is just a rename of BrowserRouter

import { BrowserRouter as Router } from 'react-router-dom';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>
);

I would also change the code in App.js to

import "./App.css";
import {
  Routes,
  Route,
  useNavigate,
  NavLink,
  Link,
} from "react-router-dom";
import Newpage from "./screens/Newpage.js";
// import { NavigationContainer } from '@react-navigation/native';
// import { createNativeStackNavigator } from '@react-navigation/native-stack';

function App() {
  let navigate = useNavigate();
  function navigateToCloset() {
    navigate(Newpage);
  }

  const About = () => (
    <div className="about">
      <h1>About Me</h1>
      <p>
        Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident
        corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum
        molestias?
      </p>
      <p>
        Ipsum dolor dolorem consectetur est velit fugiat. Dolorem provident
        corporis fuga saepe distinctio ipsam? Et quos harum excepturi dolorum
        molestias?
      </p>
    </div>
  );

  const Contact = () => (
    <div className="contact">
      <h1>Contact Me</h1>
      <p>
        You can reach me via email: <strong>hello@example.com</strong>
      </p>
    </div>
  );

  return (
    <div id="App">
      <div className="header">My Closet</div>
      <div className="homepagebuttondiv">
        <button className="homepagebutton" onClick={navigateToCloset}>
          Enter Closet
        </button>
        <button className="homepagebutton">New Clothing</button>
      </div>
      <Routes>
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
      </Routes>

      <nav>
        {/* <Link to="/">home?</Link> */}
        <Link to="/about">About</Link>
      </nav>
    </div>
  );
}

export default App;
user_187508970

Are you using react@18.0.0 and react-dom@18.0.0?

If so, then use this code:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

instead of this:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

ReactDOM.render((<App />).document.getElementById("root"));

in index.js file.

user_173008130

You can nest your button inside a link to navigate to a different page.

App.js:

return (
    <BrowserRouter>
      <div id="root">
        <nav>
          <div className="header">My Closet</div>
          <div className="homepagebuttondiv">
            <Link to="/new">
              <button className="homepagebutton">Enter Closet</button>
            </Link>
            <button className="homepagebutton">New Clothing</button>
          </div>
          <Routes>
            <Route path="new" element={<Newpage />} />
            <Route path="about" element={<About />} />
            <Route path="contact" element={<Contact />} />
          </Routes>

          {/* <Link to="/">home?</Link> */}
          <Link to="/about">About</Link>
        </nav>
      </div>
    </BrowserRouter>
  );
}

There is a typo in index.js. The . before "document" needs to be a , let me know if this works, I'm not sure if this is what you are trying to achieve. This is a 'bandaid' solution to your problem. There are best practices in terms of creating a multi page website, in which your app.js should look something like:

function App() {
  return (<>
      <BrowserRouter>
        <Routes>
          <Route exact path='/' element={<Home />} />
          <Route path='/about' element={<About/>} />
        </Routes>
      </BrowserRouter>
  </>
  );
}

To navigate around your app within those pages, you could use a navbar or use Links in your home and other components.

user_186048700
Related