Question

函数onEnter和onUpdate不能在react 4上运行。我尝试了不同的方法来收听此更改，但是我开始转圈。我想管理我的App组件中的所有内容。

此功能将允许我在每次课程更改时关闭菜单。（isOpen）==>错误

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

我使用react-router-dom，然后反应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组件中的所有内容。

Answer 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

onChangeRoute吗？ React v4 react-router-dom

1 个答案: