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

【问题标题】：How to add Nested and Non-Nested Routes with React Router - ReactJS?如何使用 React Router 添加嵌套和非嵌套路由 - ReactJS？
【发布时间】：2018-12-28 17:07:28
【问题描述】：

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

如果我使用 Div 标签，那么它会弄乱我的模板。我在 Switch 标签内添加登录组件 - 路由。如果我不这样做，我会得到 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;

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

这就是我所做的。见DEMO。

我不想因此而太迷茫，所以我选择了一种简单的方式。

routes.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 路由即可。

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

【讨论】：

喜欢这种方法。 @ukasyah。谢谢。