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

Question

我在主組件中定義了一個路由器。 我想通過react路由器在此主要組件中渲染組件。 每次渲染任何Route時，我都希望在Navbar上也渲染主組件。 我該如何路由？

方法1：

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;

方法2：

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

我找到了解決方案，將路線嵌套在組件中，然后在Index組件中調用{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;