时间戳

首页 > 解决方案 > React 组件不会在 Production Build 中呈现（在 Dev 中工作......）

reactjs - React 组件不会在 Production Build 中呈现（在 Dev 中工作......）

问题描述

我有一个组件，它beerId从 url 参数中获取一个产品并渲染。如果刷新，再次渲染，没问题 - 在 DEV 模式下。

在生产中，当您通过从另一个浏览器页面单击该页面来访问该组件时，该组件只能工作一次。如果刷新，是404。这里有什么问题？

注意：我正在使用 Github Pages 进行部署。

零件：

const BeerDetails = () => {
  
  const [selectBeerData, setSelectBeerData] = useState({
    // omit default state values
  })
  
  // get id from URL
  const params = useParams();
  const { beerId } = params;
  
  // some Redux stuff
  const dispatch = useDispatch()
  const currencySign = useSelector(state => state.search.currencySign);
  const currencyCode = useSelector(state => state.search.currencyCode);

  const { beer } = useFetch(beerId)

  useEffect(() => {
    if(beer) {
        const beerPricedInGBP = addPrice(beer)
        const beerWithCurrency = applyCurrency(beerPricedInGBP, currencyCode);
        const selectBeerData = getSelectedBeerDetails(beerWithCurrency);
        setSelectBeerData(selectBeerData)
        window.scrollTo(0, 0);
    } 
  }, [beer])
  
  useEffect(() => {
    if(beer) {
       const beerPricedInGBP = addPrice(beer) 
       const beerWithCurrency = applyCurrency(beerPricedInGBP, currencyCode);
       const selectBeerData = getSelectedBeerDetails(beerWithCurrency);
      setSelectBeerData(selectBeerData)
    }
  }, [currencyCode])

  const { name, image_url, abv, ibu, price, tagline, description } = selectBeerData;

  // return

路线：

function App() {
  return (
    <Router>
      <div className="App">
        <div className="container">
          <Header />
          <Switch>
            <Route exact path="/punk-beer" component={Browse} />
            <Route path="/punk-beer/beers/:query" component={SearchResult} />
            <Route path="/punk-beer/basket" component={Basket} />
            <Route path="/punk-beer/beer-details/:beerId" component={BeerDetails} />
          </Switch>
          <Footer />
        </div>
      </div>
    </Router>
  );
}

export default App;

非常感谢您关注这些人！

标签： reactjshttp-status-code-404renderingproduction

解决方案

如果您有同样的问题，这里有一个全面的指南来解决它：

https://github.com/rafgraph/spa-github-pages

但这并不容易。最后，我部署在 Netlify 而不是 gh pages 上。它有同样的问题：客户端路由，但它更容易修复。这就是你所需要的：

https://hiddedevries.nl/en/blog/2020-06-27-how-deployment-services-make-client-side-routing-work

（滚动到 Netlify 部分）

netlify.toml有关文件和语法的其他指南：

https://docs.netlify.com/routing/redirects/

https://docs.netlify.com/configure-builds/file-based-configuration/#redirects

祝你好运！

推荐阅读