Question

我有一个React + Django应用程序，它是一个自定义视频播放器，我目前正在视频结束时处理相关的视频/队列。如果我使用简单的window.location.replace链接到下一个视频，我就可以使用它了。但是，只重新加载视频播放器会更顺畅。

从我在SO上阅读的很多线程看来，似乎可以在React中的子组件中重新路由我的“main”组件，但是这些方法都没有对我有用而且我有与我读过的所有内容略有不同。如果视频播放取决于我的URL（或路由），是否仍然可以重新加载而无需重新呈现整个页面？

以下是相关代码的准系统版本：

Index.js：

class Welcome extends React.Component {
    render() {
        return (
            <BrowserRouter>
                <App/>
            </BrowserRouter>
        )
    }
}

const element = <Welcome/>;
ReactDOM.render(
    element,
    document.getElementById('container')
);

App.js：

class App extends React.Component {
    render() {
        return (
            <Row id="app-container" className="h-100 justify-content-center align-items-center">
                <Switch>
                    <Route path='/app/:number' component={Player}/>
                </Switch>
            </Row>
        )
    }
}

export default App

Queue.js，注意：这显然只是我遇到麻烦的部分。我有可点击的imgs来执行window.location.replace方法。

<div>
 <Link to='app/1' replace>
  Previous Video
 </Link>
<div>

Link实际上确实以我想要的方式更改了URL，但是没有重新加载应用程序。我花了很长时间试图从其他SO帖子中解决这个问题的解决方案，但是我担心一旦得到它，它最终会迫使整个页面重新加载。任何人都可以告诉我是否可以重新重新路由我的应用程序？只要应用程序基于新路由，URL就不会改变。

提前致谢

在不重新加载整个页面的情况下重新路由组件

0 个答案: