反应路由器 4 条路线属性

Question

我在 react-router 3 中有一个设置，它非常适合嵌套组件。现在，当我尝试在 react-router V4 中做同样的事情时，我似乎无法让它工作。我已经阅读了几篇文章，包括文档，但仍然无法正常工作。我首先在 react-router 3 中发布我的设置。然后我在 react-router 4

中尝试过什么

React Router 3 设置 App.js

import { Router, browserHistory } from 'react-router';
import Store from './store';
import routes from './routes';

ReactDOM.render(
  <Provider store={Store}>
    <Router history={browserHistory} routes={routes}/>
  </Provider>
  ,document.querySelector('#react-container'));

routes.js

import React from 'react';
import { Route, IndexRoute } from 'react-router';

import MainLayout from './layouts/main';
import NotFound from './pages/notfound';
import Home from './pages/home';




export default (
        <Route path="/" component={MainLayout}>
            <IndexRoute component={Home}/>
            <Route path="*" component={NotFound} />
        </Route>
);

layouts/main.js

import React, { Component } from 'react';
import Header from '../components/header';
import Footer from '../components/footer';

export default class MainLayout extends Component{
    render(){
        return (
            <div>
                <Header />
              <div id="page-content">{this.props.children}</div>
                <Footer />
            </div>
        );
    }
};

React-router 4 我正在尝试弄清楚如何使用我的 layout.js 嵌套，就像我在 React Router 3 中所做的那样

App.js

import { BrowserRouter as Router } from 'react-router-dom';
import Store from './store';
import routes from './routes';

ReactDOM.render(
  <Provider store={Store}>
    <Router routes={routes}/>
  </Provider>
  ,document.querySelector('#react-container'));

routes.js

    import React from 'react';
    import { Route, Switch } from 'react-router-dom';

    import MainLayout from './layouts/main';
    import NotFound from './pages/notfound';
    import Home from './pages/home';


   export default (
        // <Route path="/" component={MainLayout}>
        //  <IndexRoute component={Home}/>
        //  <Route path="*" component={NotFound} />
        // </Route>
        <Switch>
          <Route exact path="/" component={MainLayout}/>
          <Route path="/" component={Home}/>
          <Route component={NotFound} />
        </Switch>

);

Answer 1

如果 MainLayout 将成为所有部分（主页等）的容器（布局），那么您可以将 MainLayout 的子路由放在 MainLayout 中：

import React, { Component } from 'react';
import Header from '../components/header';
import Footer from '../components/footer';

const Main = ({match}) => {
  render() {
    return (
        <div>
            <Header />
            <div id="page-content">
              <Route path={match.url + '/home'} component={Home} />
              <Route path={match.url + '/about'} component={About} />
            </div>
            <Footer />
        </div>
    );
  }
}

export default Main

如果您有多个部分使用 MainLayout，您可以创建一个包含所有路线及其相关组件的数组，并 map 通过它们。

反应路由器 4 条路线属性

React Router 4 routes property

reactjs

react-router

react-router-v4

反应路由器 4 条路线 属性

React Router 4 routes property

reactjs

react-router

react-router-v4

反应路由器 4 条路线属性