在react-router-domv5中將多個Route渲染到一個主Router

我有多個具有不同路徑（路由）的組件，并希望將它們匯出到單個主路由器組件。

例如：

routeComponent1.js

export default function childRoutes() {
  return (
    <div>
      <Route path="/foo" component={foo} />
      <Route path="/bar" component={bar} />
    </div>
  );
}

routeComponent2.js

export default function childRoutes2() {
  return (
    <div>
      <Route path="/foo2" component={foo2} />
      <Route path="/bar2" component={bar2} />
    </div>
  );
}

我想用它

根.js

import routeComponent1 from 'routeComponent1.js';
import routeComponent2 from 'routeComponent2.js';

class Root extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <Router>{routeComponent1}</Router>;
  }
}

它給出了一個錯誤 - 不變違規：<Route>元素僅用于路由器配置，不應呈現。

期待

<Router>
  <div>
    <Route path="/foo" component={foo} />
    <Route path="/bar" component={bar} />
  </div>
</Router>

uj5u.com熱心網友回復：

routeComponent1并且routeComponent2是 React 組件。React 組件被大寫并呈現為 JSX。

例子：

import RouteComponent1 from 'routeComponent1.js';
import RouteComponent2 from 'routeComponent2.js';

class Root extends Component {
  render() {
    return (
      <Router>
        <RouteComponent1 />
        <RouteComponent2 />
      </Router>
    );
  }
}

uj5u.com熱心網友回復：

假設您使用的是最新版本的反應路由器（v6），您可以使用此處描述的嵌套路由：https ://reactrouter.com/en/main/start/overview#nested-routes

所以這就是你的App.jsx樣子：

import {
  BrowserRouter as Router, Routes, Route
} from "react-router-dom";
import {AuthRoute, NonAuthRoute, UserParent} from "../components";
import {
  Dasboard, UserList, CreateUser, SignIn, Page404
} from "./pages"


// Define your paths here ...
export const paths = {
  SIGN_IN: "/sign-in",
  DASHBOARD: "/dashboard",
  LIST_USERS: "/users/list"
  CREATE_USERS: "/users/create"
}

// All your routes which require authentication (requires login)
const authRoutes = [
  {
    path: paths.DASHBOARD,
    element: <Dashboard />
  },
]
// Authenticated routes but need a particular parent component
const userAuthRoutes = [
  {
    path: paths.LIST_USERS,
    element: <UserList />
  },
  {
    path: paths.CREATE_USERS,
    element: <CreateUser />
  }
]

// Paths that dont require authentication
const nonAuthRoutes = [
  {
    path: paths.SIGN_IN,
    element: <SignIn />
  },
]


const App = () => {
  return (
    <Router>
      <Routes>
        {/* AUTHENTICATED ROUTES */}
        <Route element={<AuthRoute />}>
          {authRoutes.map((route, index) =>
            <Route key={index} {...route} />;
          )}
          {/* User Management */}
          <Route element={<UserParent />}>
            {userAuthRoutes.map((route, index) =>
              <Route key={index} {...route} />
            )}
          </Route>
        </Route>

        {/* NON-AUTH ROUTES */}
        <Route element={<NonAuthRoute />}>
          {nonAuthRoutes.map((route, index) =>
            <Route key={index} {...route} />;
          )}
        </Route>
        <Route path="*" element={<Page404 />} />
      </Routes>
    </Router>
  )
}

標籤：javascript反应反应路由器反应路由器dom

上一篇：如何提交antdPopConfirm的antdformonconfirmation？

下一篇：從庫ggplot2在R中使用scale_size的問題