dot in path breaks reload

[dusty]

Describe the bug

In an app using an SPA router such as react-router-dom, when a dot exists in the path, one cannot link directly to that page or reload that page because it results in a 404 error.

I couldn't find any documentation on how to override that so it will follow a pattern such as checking if the file exists first and if not, then always falling back to the index.html file.

Reproduction

https://github.com/dusty/vitejs-path

import React from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
import { Item } from "./Item";

function App() {
  return (
    <BrowserRouter>
      <div>
        <p>
          <Link to="/items/1">Item 1</Link>
          <Link to="/items/1.1" style={{ marginLeft: "10px" }}>
            Item 1.1
          </Link>
        </p>
      </div>
      <Switch>
        <Route path="/items/:id">
          <Item />
        </Route>
      </Switch>
    </BrowserRouter>
  );
}

export default App;

System Info

vite/2.0.3 darwin-x64 node-v15.7.0

Logs (Optional if provided reproduction)

  vite:spa-fallback Not rewriting GET /items/1.1 because the path includes a dot (.) character. +3m
  vite:time 1ms   /items/1.1 +3m

[jonaskuske]

Take a look at this issue: #2190, the plugin linked in the last comment might solve your issue: https://www.npmjs.com/package/vite-plugin-rewrite-all

[dusty]

cool, thanks @jonaskuske

[dusty]

I can confirm that this worked for me.