如何使用 React Router - ReactJS 添加嵌套和非嵌套路由？

debugcn 发表于 Dev

编码器

我有一个路由器文件，其中我的路由嵌套在索引组件下。但是，我想要一些其他组件，登录我不想嵌套在任何组件下，但我想用它来重定向到“/”家庭路线。

如果我使用 Div 标签，那么它就会弄乱我的模板。我正在添加登录组件 - 开关标签内的路由。如果我不这样做，我会得到 React 只能有一个子错误。

有谁知道如何做嵌套路由和非嵌套路由？请帮忙。

这是我的路由器文件。

import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store/store';
import { Router, Route , Switch } from 'react-router-dom';
import Index from './actions/indexToggle/indexActions';
import FirstDashboard from './_layouts/views/firstDashboard';
import SecondDashboard from './_layouts/views/secondDashboard';
import ThirdDashboard from './_layouts/views/thirdDashboard';
import FourthDashboard from './_layouts/views/fourthDashboard';
import history from './history';
import FifthDashboard from './_layouts/views/fifthDashboard';
import Login from './_layouts/views/Login/login';
const Main = () => (


        <Provider store={store}>

          <Router history={history}>
              <Switch>
                  <Index>
                      <Route  exact path='/overview1' component={FirstDashboard} />
                      <Route  exact path='/overview2'  render={(props) => <SecondDashboard {...props} show="show" /> }   />
                      <Route  exact path='/overview3'  component={ThirdDashboard} />
                      <Route  exact path='/overview4'  component={FourthDashboard} />
                      <Route  exact path='/overview5'  component={FifthDashboard} />  
                  </Index>
                  <Route path='/login' component={Login} />
                </Switch>
          </Router>

        </Provider>

)
export default Main;

乌卡莎

这是我所做的。见演示。

我不想因为这个而太困惑，所以我选择了一个简单的方法。

路由.js

import Home from "./pages/Home";
import ComplexPath from "./pages/ComplexPath";
import Login from "./pages/Login";

export default [
  {
    path: "/",
    component: Home,
    withHeaderSidenav: true
  },
  {
    path: "/yet/another/complex/path",
    component: ComplexPath,
    withHeaderSidenav: true
  },
  {
    path: "/login",
    component: Login,
    withHeaderSidenav: false
  }
];

然后，简单map的路线。

应用程序.js

import React from "react";
import { Switch, Route } from "react-router-dom";
import BaseLayout from "./BaseLayout";
import routes from "./routes";

export default class extends React.Component {
  state = {
    withHeaderSidenav: true
  };

  showHeaderSidenav = (withHeaderSidenav = true) => {
    this.setState({ withHeaderSidenav });
  };

  render() {
    return (
      <BaseLayout withHeaderSidenav={this.state.withHeaderSidenav}>
        <Switch>
          {routes.map(route => (
            <Route
              exact
              key={route.path}
              path={route.path}
              render={() => (
                <route.component
                  showHeaderSidenav={() =>
                    this.showHeaderSidenav(route.withHeaderSidenav)
                  }
                />
              )}
            />
          ))}
        </Switch>
      </BaseLayout>
    );
  }
}

每个页面都有一个 HOC 来处理布局更改。见pages/withBase.js演示项目。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。