Question

我的 /public 文件夹中有一个静态的 .pdf 文件。我想要它，以便 mywebsite.com/seo-programs.html 重定向到“mywebsite.com/seo-programs.pdf”。这是我从另一个开发人员那里继承的反应应用程序。我不熟悉 React-Apps。

我必须使用 mywebsite.com/seo-programs.html 网址，因为这是面向公众的网址。此页面本身不存在。

在 index.js 我有：

import { BrowserRouter, Switch, Route, Redirect  } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

class Root extends Component{
    render(){
        return(
            <BrowserRouter basename={'/'}>
                <Switch> 
                     <Route exact path={`${process.env.PUBLIC_URL}/`} component={Home}/>
                     ... several more routes
                </Switch>
            </BrowserRouter>
        )
    }
}

ReactDOM.render(<Root/>, document.getElementById('root'));
serviceWorker.register();

我已成功通过使用 <switch> 外部的以下代码重定向 URL（不知道为什么，但在 <switch> 组件内部使用时它不起作用：

<Route path={`${process.env.PUBLIC_URL}/seo-programs.html`} // adding the exact attr does nothing
    render={() => <Redirect to={`${process.env.PUBLIC_URL}/seo-programs.pdf`} />}
/>

问题是 URL 更新正确，但我必须手动重新加载页面才能加载 pdf 文件。

我想知道如何以某种方式在此处强制重新加载，以便在重定向后直接呈现 pdf。

我试过在重定向组件上使用 onEnter 道具，但没有成功：

<Route path={`${process.env.PUBLIC_URL}/seo-programs.html`} 
    render={() => <Redirect to={`${process.env.PUBLIC_URL}/seo-programs.pdf`} onEnter={() => window.location.reload()} />}
/>

以及尝试 render js 命令...

<Route path={`${process.env.PUBLIC_URL}/seo-programs.html`}
    render={() => <Redirect to={`${process.env.PUBLIC_URL}/seo-programs.pdf`} 
        render={() => window.location.reload()} />}
/>

如果我在这里遗漏了一些基本内容，我很抱歉。我正在抓紧稻草。因为这一切都发生在组件之外，所以我想知道这是否可以单独在 index.js 上完成，在 <BroserRouter/Route> 内完成。如何告诉客户端从服务器获取新 URL 而不是仅仅更改 URL/视图？

感谢您的帮助！

在 React App Router 中重定向页面后重新加载 URL

0 个答案: