NodeJS React-router在从路由而不是主页加载时无法正常工作

nukf8bse  于 2022-12-03  发布在  Node.js
关注(0)|答案(1)|浏览(165)

我们使用的是react 16.13和react-router-dom 5.1.2,但我们很难让它按照我们想要的方式工作:

(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'));
    }
}
1sbrub3j

1sbrub3j1#

对于react-router-dom@6,您需要使用Routes而不是Switch。如下所示:

<BrowserRouter>
        <Routes>
          <Route path="/" element={<App />}>
          </Route>
        </Routes>
      </BrowserRouter>

相关问题