React routers not working - It displays a blank page-CodePudding

Here is my App.js from my current project , I am facing an issue, whenever I render all my components individually which are mentioned in the commented part it gives me complete output, but as soon as I render it through the react-router-dom the page turns blank. Please help me with this.


import Topbar from "./components/topbar/Topbar";
import Homepage from "./pages/homepage/Homepage";
import Login from "./pages/login/Login";
import Register from "./pages/register/Register";
import Settings from "./pages/settings/Settings";
import Single from "./pages/single/Single";
import Write from "./pages/write/Write";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Header from "./components/header/Header";
import Posts from "./components/posts/Posts";

function App() {
  const currentUser = true;
  return (
    // <>
    //   <Topbar/>
    //   <Header/>
    //   <Single/>
    //   <Homepage/>
    //   <Posts/>
    //   <Register/>
    //   <Login/>
    //   <Settings/>
    // </>
    
    <BrowserRouter>
      <Topbar />
      <Routes>
        <Route exact path="/">
          <Homepage />
        </Route>
        <Route path="/posts">
          <Homepage />
        </Route>
        <Route path="/register">
          {currentUser ? <Homepage /> : <Register />}
        </Route>
        <Route path="/login">{currentUser ? <Homepage /> : <Login />}</Route>
        <Route path="/post/:id">
          <Single />
        </Route>
        <Route path="/write">{currentUser ? <Write /> : <Login />}</Route>
        <Route path="/settings">
          {currentUser ? <Settings /> : <Login />}
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

export default App;

CodePudding user response：

Try changing your routes to look something like this:

<Route exact path="/" element={<Homepage />} />

CodePudding user response：

The component you want to render should be in the element prop.

https://reactrouter.com/docs/en/v6/getting-started/overview https://reactrouter.com/docs/en/v6/upgrading/v5

<Route exact path="/" element={<Homepage />} />

The only time you can put something inside a Route as a child element is for nested routing. For example:

<Route path="/teams" element={<Teams />}>
  <Route path=":teams" element={<Team />} />
</Route>

CodePudding user response：

I have been through this. I think you should install React Router first (Already installed it seems)

npm install react-router-dom@6

I suggest using it in the following way -

function App() {
  return (
    <Router>
        <div className='container'>
          <div className='Header'>
            <h2>Blog Site</h2>
          </div>
          <div className='links'> // Mention your links here
            <ul>
              <li>
                <Link to="/tag">Tags</Link>
              </li>
              <li>
                <Link to="/startup">Startups</Link>
              </li>
            </ul>
          </div>
          <Routes> // Describe your routes here
            <Route exact path="/tag" element={<Tag />} />
            <Route exact path="/startup" element={<Startup />} />
          </Routes>
        </div>
    </Router>
  );
}

I have picked small code piece from my project, you can try using my approach.