动态链接在 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>
)