每次使用路由单击菜单项时，都会刷新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