Unable to visit pages in react router dom v6?

Question

I am trying to a create router. I works for home page but when i goto other page like /btn its not working.

The error is Cannot GET /btn.

I tried this with Switch and Routes components but not working.

Code:-

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  toggleBtn = () => {
    console.log("Hello World!");
  };

  render() {
    return (
      <Router>
        <Suspense fallback={<div>...Loading</div>}>
          <Routes>
            <Route
              exact
              path="/"
              element={<SimpleBtn toggleBtn={this.toggleBtn} />}
            />
            <Route exact path="/btn">
              <SimpleBtn2 toggleBtn={this.toggleBtn} />
            </Route>
          </Routes>
        </Suspense>
      </Router>
    );
  }
}

I almost wrote code as in react docs but it didn't solve the problem.

Answer 1

This is a server side issue. You need to add support for HTML5 Push State to the server. If youre using create-react-app this will just work out of the box.