使用反应路由器dom v6时组件不呈现

Question

这个问题有很多答案，但他们只回答丢失或忘记替换任何关键字，例如exact 、 Redirect等，或代码流。

最近我已经将我的反应应用程序从react-router-dom: "^5.2.0"升级到"react-router-dom": "^6.3.0" 。 我已按照从 v5 迁移到 v6指南进行操作，但我无法看到在特定路线上呈现的组件。 作为react-router-dom一部分，我只添加了 React app和component的routes部分。 我遵循迁移指南的方式如下：

index.js

const container = document.getElementById('root');

// Create a root.
const root = createRoot(container);

root.render(
    <Provider store={Store}>
        <BrowserRouter>
            <Routes>
                <Route path="/*" element={<App />} />
            </Routes>
        </BrowserRouter>
    </Provider>
);
serviceWorker.unregister();

应用程序.tsx

const App: FunctionComponent<IAppProps> = () => {

    /* other stuff useEffect and fetch functions etc... */

    return (
        <ThemeProvider theme={theme}>
            <ResetStyles />
            <Routes>
                {/* Public Facing */}
                <Route path="*" element={<ViewLogin />} />
                <Route path="/forgotten-password/*" element={<ViewForgottenPassword />} />        
                <Route path="/user/signup" element={<ViewUserSignup />} />

                {/* User Protected */}
                <Route path="/account-selection/" element={<ViewAccountSelection />} />
                <Route path="/sign-out" element={<ViewSignOut />} />
                <Route path="/user" element={<ViewUserConfiguration />} />
                <Route path="/404" element={<ViewError404 />} />
                <Route path="/:account/" element={<ViewDashboard />} />

                {/* Error Pages */}
                <Route element={<Navigate to="/404" />} />
            </Routes>
        </ThemeProvider>
    );
};

export default App;

仪表板.tsx

const ViewDashboard = (props: any) => {

   /* other stuff useEffect and fetch functions etc... */

   return (
        <div className="dashboard-container">
            <Nav showSidebar={showSidebar} toggleSidebar={toggleSidebar} />

            <div className={showSidebar ? 'dashboard-view-expanded' : 'dashboard-view-collapsed'}>
                <ViewMenu sidebarExpanded={showSidebar} history={props.history} upperMenuTitle={getTitle()} />
                <div className="dashboard-view__content">
                    <Routes>
                        <Route path="/:account/" element={<Navigate to={`${account.token}/reports/dashboard`} />} />
                        <Route path="/:account/account-management/*" element={<LayoutAccountManagement />} />
                        <Route path="/:account/reports/" element={<LayoutReport />} />
                        <Route element={<Navigate to="/404" />} />
                    </Routes>
                </div>
                <ViewModal />
                <ViewNotification />
                <ViewPopup />
            </div>
        </div>
    );
};

export default memo(ViewDashboard, isEqual);

account-selection.js的render方法

render() {
        if (this.props.user.isLoggedIn !== true) {
            return <Navigate push to="/" />;
        } else if (this.state.isLoading === true) {
            return <ViewLoadingSplash />;
        } else if (this.state.hasAccount || this.props.account.isSelected) {
            console.log('Gone through account selection');
            this.props.setDisplayMenu(true);
            return <Navigate push to={`/${this.props.account.token}`} />;
        }

        return (
            <div id="account-selection__view">
                <div className="account-selection__content">
                    <div className="account-selection__content__selection">
                        <h3>Select Account</h3>
                        <ComponentInputField
                            value={this.state.search}
                            onChange={this.onInputChange}
                            placeholder="Search accounts..."
                            type="text"
                        />
                        <ComponentList rows={this.state.visibleAccounts} onRowClick={this.onAccountClick} />
                    </div>
                </div>
                <ViewNotifications />
            </div>
        );
    }

现在应用程序流程是，在登录时，有一个帐户选择页面，其中我是 select 用户，它会将我带到他们的仪表板。

如果一切正常，我们应该看到以下路线和用户的仪表板：

http://localhost:3000/demoUser/reports/dashboard

相反，它把我带到http://localhost:3000/demoUser根本没有仪表板视图。

不知道哪里出了问题，或者我是否遗漏了一些重要的东西。 这样做的正确方法将不胜感激。

Answer 1

我看到的问题是Routes组件正在渲染带有尾随"*"通配符的路径的路径，以允许后代路径路径匹配。 据我所知，您希望用户导航到"/account-selection"并呈现ViewAccountSelection组件，该组件在正确的条件下会将用户导航到"/demoUser" ，即"/:account"路由呈现ViewDashboard组件。 ViewDashboard然后将用户导航到"/demoUser/reports/dashboard"以呈现LayoutReport组件。

将缺少的通配符路径字符添加到需要它的路由中。

应用程序

<Routes>
  {/* Public Facing */}
  <Route path="*" element={<ViewLogin />} />
  <Route
    path="/forgotten-password/*"
    element={<ViewForgottenPassword />}
  />
  <Route path="/user/signup" element={<ViewUserSignup />} />

  {/* User Protected */}
  <Route
    path="/account-selection/"
    element={
      <ViewAccountSelection
        account={account}
        user={{ isLoggedIn: true }}
      />
    }
  />
  <Route path="/sign-out" element={<ViewSignOut />} />
  <Route path="/user" element={<ViewUserConfiguration />} />
  <Route path="/404" element={<ViewError404 />} />
  <Route path="/:account/*" element={<ViewDashboard />} /> // <-- here

  {/* Error Pages */}
  <Route element={<Navigate to="/404" />} />
</Routes>

查看仪表板

const ViewDashboard = () => (
  <div className="dashboard-container">
    ...
      <div className="dashboard-view__content">
        <Routes>
          <Route
            index // <-- index route, i.e. "/:account"
            element={<Navigate to="reports/dashboard" />} // <-- navigate relative
          />
          <Route
            path="/account-management/*"
            element={<LayoutAccountManagement />}
          />
          <Route path="/reports/*" element={<LayoutReport />} /> // <-- add trailing *
          <Route element={<Navigate to="/404" />} />
        </Routes>
      </div>
      ...
    </div>
  </div>
);