每次使用路由单击菜单项时 React JS 刷新页面

Question

我是 React JS 的新手，我目前正在构建一个简单的应用程序。我正在使用 Route 在组件之间导航，一切正常，但是如果我在一个页面上并且我再次单击菜单以导航到该页面，它不会刷新其内容。

我只想让组件在每次单击项目菜单时刷新其内容。

这是我的侧边栏类：

 class Sidebar extends Component {
constructor(props) {
    super(props);
}
render() {
    return (
        <Router>
            <Route render={({ location, history }) => (
                <React.Fragment>
                    <SideNav
                        onSelect={(selected) => {
                            const to = '/' + selected;
                            if (location.pathname !== to) {
                                history.push(to);
                            }
                        }}>
                        <SideNav.Toggle />
                        <SideNav.Nav>
                                <NavItem eventKey="Cars">
                                    <NavIcon>
                                        Cars
                                    </NavIcon>
                                </NavItem>
                                 <NavItem eventKey="Bicycles">
                                    <NavIcon>
                                        Bicycles
                                    </NavIcon>
                                </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                    <main>
                        <Switch>
                            <Route exact path="/" component={props => <Home />} />
                            <Route
                                exact path="/Cars"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Cars/>
                                } />
                            <Route
                                exact path="/Bicycles"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Bicycles />
                                } />
                        </Switch>
                    </main>
                </React.Fragment>
            )}
            />
        </Router>
    )
}

}

这是我的汽车组件类：

import React, { Component } from 'react';

class Cars extends Component {
    render() {
        return (
            <div style={{ textAlign: 'center', marginLeft: '295px' }} >
                <form>
                    <h1>Hello</h1>
                    <p>Enter your car name:</p>
                    <input
                        type="text"
                    />
                </form>
            </div>
        )
    }
}
export default Cars;

例如。如果我在输入中输入内容，然后单击项目菜单，我希望刷新该输入。

Answer 1

为了“刷新”（或在 React 世界中称为重新渲染）组件的内容，您需要更改它的状态，这就是 React 的工作原理。如我所见，您的组件中没有任何状态，因此如果您可以指定要“刷新”的内容，我们可以为您提供帮助。

每个 React 组件的核心是它的“状态”，一个决定该组件如何呈现和行为的对象。换句话说，“状态”允许您创建动态和交互的组件。

来自互联网某处的快速示例：

 import React from 'react';

  class Person extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        age:0
      this.incrementAge = this.incrementAge.bind(this)
    }

    incrementAge(){
      this.setState({
        age:this.state.age + 1;
      });
    }

    render(){
      return(
        <div>
          <label>My age is: {this.state.age}</label>
          <button onClick={this.incrementAge}>Grow me older !!<button>
        </div>
      );
    }
  }

  export default Person;

每次用户点击标签时，标签内部的年龄都会被重新渲染（或“刷新”），因为它的状态正在改变。

这是一个官方文档，我建议您阅读它，它将阐明您面临的许多问题。

https://reactjs.org/docs/state-and-lifecycle.html