反應路由器開放模式

Question

我是新來的人，可以響應和還原世界。 我有一個關於反應路由器的問題。 以下是我的App組件。

class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/callback" component={CallbackPage} />
          <Route exact path="/list" component={List} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}
export default App;

我的列表類如下所示：

export class List extends React.PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
    };

    this.depositHandleToggle = this.depositHandleToggle.bind(this);
  }
  depositHandleToggle = () => {
    this.props.dispatch(push(`${this.props.match.url}/deposit`));
  }
  render() {
    const { match } = this.props;
    return (
      <div>
      <Route path={`${match.url}/deposit`} component={Modal} />
        <button onClick={this.depositHandleToggle}>Open Modal</button>  
      </div>
    );
  }
}
export default List;

所以我的問題是：當我單擊列表容器中的按鈕時，為什么我的路由器找不到此URL'localhost：xxx / list / deposit'？ 它呈現了App組件，但從未返回到List組件。 列表容器中是否可以包含自定義路由？ 難道我做錯了什么？ 請有人幫助我。

我希望你能理解我的問題。 提前致謝。

回答：

我找到了答案，問題出在我的App組件列表路由中。 我使用了“ exact”關鍵字，這就是為什么列表組件內部的路由不起作用的原因。 遵循方式是正確的方式。

<Route path="/list" component={List} />

我希望這會對某人有所幫助。

Answer 1

import { Link } from 'react-router-dom';
class App extends React.PureComponent {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/callback" component={CallbackPage} />
          <Route exact path="/list" component={List} />
          <Route exact path="/list/deposit" component={Modal} />
          <Route component={NotFoundPage} />
        </Switch>
      </div>
    );
  }
}
export default App;

export class List extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { match } = this.props;
    return (
      <div>
      <Link to={'/deposit'}>Open Modal</Link> 
    );
  }
}
export default List;

在該組件中，您應該處理模式打開關閉。