组件在使用react路由器dom v6时不呈现

Question

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

最近，我将我的react应用程序从react-router-dom: "^5.2.0"升级到了"react-router-dom": "^6.3.0"。我遵循了从v6迁移到v5指南，我无法看到组件在特定路径上呈现。作为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();

App.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;

dashboard.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>
        );
    }

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

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

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>

ViewDashboard

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>
);

​

​