React Router url 属性使用 index/:id

Question

我似乎做的一切都正确，但我一直收到此 strict MIME type 和 404 错误，我不知道为什么会收到。我刚接触 React 和路由，我真的卡在这里了。

import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../components/Home";
import Contact from "../components/Contact";
import Portfolio from "../components/Portfolio";
import NotFound from "../components/NotFound";
import Header from "../components/Header";
import Portfoliopage from "../components/PortfolioPage";

const AppRouters = () => (
  <BrowserRouter>
    <div>
      <Header />
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route path="/contact" component={Contact} />
        //*I tried using this component directly with the /:id here...*
        <Route path="/portfolio/:id" component={Portfolio} />
        *//I also tried this nested routing here*
        <Route path="/portfolio" component={Portfolio}>
          <Route path="/:id" component={Portfoliopage} />
        </Route>
        <Route component={NotFound} />
      </Switch>
    </div>
  </BrowserRouter>
);

This is the error that I get when I run the code

Answer 1

您的错误表明您的 bundle.js 是相对于当前 url 加载的。将 / 添加到 src 的开头以使其成为绝对的。

<script src="/bundle.js"></script>

React Router url 属性使用 index/:id

React Router url properties using index/:id

javascript

router

web

reactjs