onChangeRoute ? React v4 react-router-dom答案

【问题标题】：onChangeRoute ? React v4 react-router-domonChangeRoute ? React v4 react-router-dom
【发布时间】：2019-04-23 17:25:02
【问题描述】：

onEnter 和 onUpdate 函数在 react 4 上不起作用。我尝试了不同的方式来听这个变化，但我开始转圈。我想管理我的 App 组件中的所有内容。

这个功能可以让我在每次更改课程时关闭我的菜单。 (isOpen) ==> 错误

本项目的 Git：https://github.com/marcdubois71450/Library-Exercise

我用 react-router-dom，react 4

import React, {Component} from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import PropTypes from 'prop-types';

import { scaleDown as Menu } from 'react-burger-menu'
import './App.css';

import Navigation from '../Navigation';
import LandingPage from '../Landing';
import SignUpPage from '../SignUp';
import SignInPage from '../SignIn';
import PasswordForgetPage from '../PasswordForget';
import HomePage from '../Home';
import AccountPage from '../Account';
import AdminPage from '../Admin';
import * as ROUTES from '../../constants/routes';

export default class App extends Component {
    render() {
        return (
          <Router>
            <div>
            <Menu pageWrapId={ "page-wrap" } outerContainerId={ "outer-container" } isOpen={this.isOpen} >
                <Navigation />
             </Menu>
              <main id="page-wrap">
                <Route exact path={ROUTES.LANDING}  component={LandingPage} />
                <Route path={ROUTES.SIGN_UP} onEnter={this.onChangeRoute} component={SignUpPage} />
                <Route path={ROUTES.SIGN_IN} onEnter={this.onChangeRoute} component={SignInPage} />
                <Route path={ROUTES.PASSWORD_FORGET} onEnter={this.onChangeRoute} component={PasswordForgetPage} />
                <Route path={ROUTES.HOME} onEnter={this.onChangeRoute} component={HomePage} />
                <Route path={ROUTES.ACCOUNT} onEnter={this.onChangeRoute} component={AccountPage} />
                <Route path={ROUTES.ADMIN} onEnter={this.onChangeRoute} component={AdminPage} />
              </main>
            </div>
          </Router>
      );
    }
}

我想管理我的 App 组件中的所有内容。

【问题讨论】：

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

【解决方案1】：

在 React Router V4 中使用渲染而不是 onEnter

文档中的示例：

// convenient inline rendering
<Route path="/home" render={() => <div>Home</div>}/>

// wrapping/composing
const FadingRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={props => (
    <FadeIn>
      <Component {...props}/>
    </FadeIn>
  )}/>
)

<FadingRoute path="/cool" component={Something}/>

Render Function

【讨论】：