我有這個問題，當在已經打開網站的選項卡上手動輸入 URL 時，React 不會更新/重繪 頁面。
我在這里有一個網站的現場演示：https : //dpldmuafup7cw.cloudfront.net/#/
當在主頁上時，您應該能夠單擊電影的鏈接，然后輸入另一部電影的 ID，例如訪問https://dpldmuafup7cw.cloudfront.net/#/film/9并將 URL 替換為https ://dpldmuafup7cw.cloudfront.net/#/film/574應該會導致頁面更新為新電影的資訊。相反，這僅在您輸入新 URL，按 Enter，然后重繪 時才有效。我在網上看到我可以使用 HashRouter，它確實緩解了手動輸入 URL 時根本沒有加載的問題。
我已經嘗試了一些我在網上看到的修復程式，例如使用 historyApiFallback 但這實際上是不可能的，因為 react 在 AWS 上運行。HashRouter 似乎也不起作用。
摘自 app.tsx：
<HashRouter>
<Switch>
[...]
<Route exact path="/film/:id">
<Film />
</Route>
</Switch>
</HashRouter>
薄膜組件：
const Film: React.FC = () => {
const [film, setFilm] = useState(null as unknown as any);
const [filmPoster, setFilmPoster] = useState('');
// get film id from route param:
const { id } = useParams<{ id: string }>();
// must use useEffect hook to use async functions
// rather than returning await asyncFunc()
useEffect(() => {
async function getFilmPoster() {
setFilmPoster(await getIMDbFilmPoster(id));
let response = await fetch(`${getFilmByIDURL}/${id}`, {
method: 'get'
});
response = await response.json();
setFilm(response);
}
getFilmPoster();
}, []);
return (
[JSX goes here...]
<h1>{film ? film.title : null}</h1>
網路包：
module.exports = {
devtool: 'inline-source-map',
entry: './src/index.tsx',
output: {
filename: 'index.bundle.js',
assetModuleFilename: 'images/[hash][ext][query]'
},
target: 'web',
devServer: {
historyApiFallback: true,
hot: true,
open: true,
port: 3000
},
performance: {
hints: false
},
resolve: {
extensions: ['.ts', '.tsx', '.js', '.json']
},
module: {
rules: [
[...]
]
}
};
任何幫助將不勝感激，我不知道為什么它不能按預期作業
此外，我知道 CSS 在某些方面非常破碎，它仍處于開發的早期階段，目前功能比潤色更重要
uj5u.com熱心網友回復：
我認為您必須在 useEffect 的 []（第二個引數）中傳遞 id 引數。因此，每次切換到另一個頁面時它都會更新。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/362458.html
標籤：javascript 反应 亚马逊网络服务 反应钩子