如何在 ReactJS 中添加嵌套路由 - React Router

Question

我的主组件中定义了一个路由器。 我想通过反应路由器在这个主组件中渲染组件。 每次渲染任何路线时，我都希望在顶部也渲染主组件，即导航栏。 如何路由它们？？

方法一：

import React, { Component } from 'react';
import './App.css';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Main from './actions/sidebartoggleActions'
import FirstDashboard from './_layouts/views/firstDashboard';
import SecondDashboard from './_layouts/views/secondDashboard';
import ThirdDashboard from './_layouts/views/thirdDashboard';
import FourthDashboard from './_layouts/views/fourthDashboard';
class Main extends Component {
  render() {
    return (
        <Provider store={store}>
          <Router>
              <div>
                    <Route path='/' exact strict component={Main} />
                     <Route path='/overview1' exact strict component={FirstDashboard} />
                     <Route path='/overview2' exact strict component={SecondDashboard} />
                     <Route path='/overview3' exact strict component={ThirdDashboard} />
                     <Route path='/overview4' exact strict component={FourthDashboard} />
              </div>
          </Router>
        </Provider>
    );
  }
}

export default Main;

方法二：

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import store from './store';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import App from './actions/sidebartoggleActions'
import FirstDashboard from './_layouts/views/firstDashboard';
import SecondDashboard from './_layouts/views/secondDashboard';
import ThirdDashboard from './_layouts/views/thirdDashboard';
import FourthDashboard from './_layouts/views/fourthDashboard';
class Main extends Component {
  render() {
    return (
        <Provider store={store}>
          <Router>
              <div>
                     <App />
                     <Route path='/overview1' exact strict component={FirstDashboard} />
                     <Route path='/overview2' exact strict component={SecondDashboard} />
                     <Route path='/overview3' exact strict component={ThirdDashboard} />
                     <Route path='/overview4' exact strict component={FourthDashboard} />
              </div>
          </Router>
        </Provider>
    );
  }
}

export default Main;

Answer 1

          <Router>
              <div>
                    <Header />
                    <Route path='/' exact strict component={Main} />
                     <Route path='/overview1' exact strict component={FirstDashboard} />
                     <Route path='/overview2' exact strict component={SecondDashboard} />
                     <Route path='/overview3' exact strict component={ThirdDashboard} />
                     <Route path='/overview4' exact strict component={FourthDashboard} />
              </div>
          </Router>

这应该没问题。这样做将确保无论使用什么路由，它都将始终位于您的标题下方。

Answer 2

我找到了解决方案，我将 Routes 嵌套在 Component 中，然后在 Index component 中调用 {props.this.children} ，解决了我的问题。 我推荐了-https://github.com/reactjs/react-router-tutorial/tree/master/lessons/04-nested-routes

const Main = () => (


        <Provider store={store}>

          <Router>
                <Switch>
                     <Index>
                     <Route  path='/overview1' component={FirstDashboard} />
                     <Route  path='/overview2'  component={SecondDashboard} />
                     <Route  path='/overview3'  component={ThirdDashboard} />
                     <Route  path='/overview4'  component={FourthDashboard} />
                     </Index>
                </Switch>

          </Router>

        </Provider>

)
export default Main;