Ho-
Ho-

Reputation: 1

hashrouter is not working, just returns an empty page

// App.js
import React from 'react';
import './App.css';
import { HashRouter , Route } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';

function App() {
  return (
    <HashRouter>
      <Route exact path="/" component={Home}/>
      <Route path="/about" component={About} />
    </HashRouter>
  );
}

export default App;

When i run 'npm start' , the page url is just "localhost:3000/". Not "localhost:3000/#/" and empty page shows up. I tried "localhost:3000/#/about" and "localhost:3000/#/" but it just returns an empty page.

Everything worked fine before I added HashRouter.

Tried wrapping the Route tags with but didn't help

Checked 'package.json' file, and "react-router-dom" was there

Home.js and About.js works fine individually I think the problem is with the HashRouter..

Upvotes: 0

Views: 183

Answers (1)

Ho-
Ho-

Reputation: 1

    // App.js
import React from 'react';
import './App.css';
import { HashRouter , Route , Routes } from 'react-router-dom';
import Home from './routes/Home';
import About from './routes/About';

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

export default App;

problem solved

Upvotes: -1

Related Questions