[Bug]: Using embed in a route with param causes it to render the whole application inside the div.

[sakmalh]

What version of React Router are you using?

6.23.0

Steps to Reproduce

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout.jsx";
import Home from "./pages/Home.jsx";
import Blogs from "./pages/Blogs.jsx";


export default function App() {
    return (
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route index element={<Home />} />
                    <Route path="blogs/:id?" element={<Blogs />} />
                </Route>
            </Routes>
        </BrowserRouter>
    );
}

const Blogs = () => {
    return (
        <div>
            <embed src="dummy.pdf" type="application/pdf"/>
        </div>
    )
};

export default Blogs;

when the url is example.com/blogs there isnt any issue and it renders correctly. But when there is an id in the blogs it renders the whole app inside where the pdf is supposed to display. Tried iframe and object along with embed. Tried using Switch also. refresh on the url with the id if the problem does not show.

Expected Behavior

Supposed to show the pdf even if the id in url exists

Actual Behavior

Renders a dupplicate of the whole app inside the embed

HTML Snippet. Loops repeatedly

[timdorr]

It looks like your application server isn't set up to serve static files and is instead serving up your React app. This isn't a bug with React Router.