動態鏈接在 react-app 的構建中不起作用

Question

我在BrowserRouter和Switch中有以下路線

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'          
<Router>
<Switch>
      <Route exact path="/" component={HomeScreen}/>
      <Route exact path="/about" component={AboutScreen}/>
      <Route exact path="/products" component={ProductScreen}/>
      <Route path="/product/:id" component={SingleProductScreen}/>
</Router>
</Switch>

所有鏈接都在 localhost 中完美運行。 除了最后一條路線，當我npm run build然后部署時，什么都沒有呈現（甚至沒有 404 頁）。 我正在使用 react-router-dom 進行路由

編輯：這是我在 domain.com/product/1 上得到的

這是我的 SingleProductScreen.js：

import React, { useEffect, useState } from 'react'

const SingleProductScreen = ({ match }) => {
const id = match.params.id;
return (
    <div className="App">
        <h1 className="title">{`Product Number: ${id}`}</h1>
    </div>
    )
}

export default SingleProductScreen

Answer 1

一旦你構建反應，它將生成所有 static 文件。

對於動態路由，它更像

const App = () => (
    <BrowserRouter>
        {/* here's a div */}
        <div>
        {/* here's a Route */}
        <Route path="/products" component={ProductScreen}/>
        </div>
    </BrowserRouter>
)

// when the url matches `/:id` this component renders
const ProductScreen= ({ match }) => (
    // here's a nested div
    <div>
        {/* here's a nested Route,
            match.url helps us make a relative path */}
        <Route
        path={match.url + '/:id'}
        component={SingleProductScreen}
        />
    </div>
)