Question

我在React中有一个应用程序，我要填写一个小表格，然后当用户单击“提交”按钮时，应该将他完全带到另一个页面。虽然我只设计了视觉部分，但没有在应用中编写任何功能，但我尝试使用react-router v4.3.1设置路由器。我是React Router的新手，我想要的是之前要完全卸载的内容以及要加载的新组件。这是我的代码。这是我的App.js，其中包含Routing.js，我在其中设置了路由器

class App extends Component {
  render() {
    return (
      <div className="App">
        <Routing />
        <Brand />
      </div>
    );
  }
}

这是Routing.js

const Routing = (props) => {
    return (<BrowserRouter>
        <Switch location={props.location}>
                <Route path="/" exact component={HomeJumbotron} />
                <Route path="/section1" component={SecondPage} />
        </Switch>
    </BrowserRouter>);
}

这是HomeJumbotron，其中装有组件PaymentForm，在该组件中，我有按下该按钮时应卸载HomeJumbotron并安装SecondPage的按钮

class HomeJumbotron extends Component {
  render() {
    return (
      <Jumbotron className="main">
        <div className="container">
          <Header />
          <PaymentForm />
        </div>
      </Jumbotron>
    );
  }
}

class PaymentForm extends Component {
  handleValidSubmit(event) {
    event.preventDefault();
  }

  handleClick() {
    axios
      .get(
        "https://e27c15ee-bc16-4709-902a-783a1f517b79.mock.pstmn.io/demo?uId=001"
      )
      .then(response => console.log(response));
  }
  render() {
    return (
      <AvForm onValidSubmit={this.handleValidSubmit}>
        <Ref />
        <Amount />
        <BrowserRouter>
          <Link to="/section1">
            <div>
              <Button className="wide" onClick={this.handleClick.bind(this)}>
                Pay
              </Button>
            </div>
          </Link>
        </BrowserRouter>
      </AvForm>
    );
  }
}

现在发生的事情是当我按下按钮时，URL发生了变化，但是新的Component无法呈现，基本上没有任何变化！现在，如果我刷新页面，它就可以工作了，这很有意义，因为URL已更新。但是我不能总是刷新页面以显示新内容！我想我可能正在阻止更新，但是我没有到达必须通过位置的位置？我尝试了很多事情，但是没有用。

Answer 1

您应该像已经拥有的那样，在应用程序顶部仅包含一个BrowserRouter组件。删除Link周围的那一个，它将按预期工作。

class PaymentForm extends Component {
  // ...

  render() {
    return (
      <AvForm onValidSubmit={this.handleValidSubmit}>
        <Ref />
        <Amount />
        <Link to="/section1">
          <div>
            <Button className="wide" onClick={this.handleClick.bind(this)}>
              Pay
            </Button>
          </div>
        </Link>
      </AvForm>
    );
  }
}

React-Router更新URL但组件未加载

1 个答案: