我们使用的是react 16.13和react-router-dom 5.1.2,但我们很难让它按照我们想要的方式工作:
- 与我们的https://react.domain.com/一起使用时效果很好
- 但是当用户直接在子页面https://react.domain.com/page1上启动应用程序时,就不会了,因为我们找不到任何方法来告诉react-router基本url仍然是
/
而不是page1/
(We'已配置nodejs/express后端发送react应用程序(无论路由如何)
因此,react-router只是将所有历史/路径添加到/page1
url,从而得到/page1/login
、/page1/page1
等,而不是/login
或/page1
url。
有什么办法可以做到这一点吗?目标是允许刷新页面,并允许直接访问特定的路线。
EDIT:代码示例
客户端
<StoreProvider store={store}>
<Suspense fallback={<MainPageFallback />}>
<ThemeProvider theme={theme}>
<Router basename={location.pathname}>
<I18nextProvider i18n={i18next}>
<TryCatch>
<Navbar actions={<UserSettings />} />
<div className={classes.appContent}>
<Switch>
<Route exact path="/start">
<LandingPage />
</Route>
<Route exact path="/search">
<SearchPlacePage />
</Route>
<Route exact path="/signup">
<SignUpPage />
</Route>
<Route exact path="/signin">
<LoginPage />
</Route>
<Route exact path="/forgot_password" component={ForgotPassword} />
<Redirect from="/*" to="/start" />
</Switch>
<Snackbar />
</div>
</TryCatch>
</I18nextProvider>
</Router>
</ThemeProvider>
</Suspense>
</StoreProvider>
服务器端
@Route('/*')
public async home({ query }: Request, res: Response) {
const { resolve } = await import('path');
const { readFileAsync } = await import('../Infrastructure/readFileAsync');
try {
const file = (await readFileAsync(resolve(__dirname, '..', '..', '..', 'static', 'index.html')))
.toString('utf-8');
return res.send(file);
} catch (err) {
return res.sendFile(resolve(__dirname, '..', '..', '..', 'static', 'notFound.html'));
}
}
1条答案
按热度按时间1sbrub3j1#
对于react-router-dom@6,您需要使用
Routes
而不是Switch
。如下所示: