Reactjs 反应路由器开放模式

我是一个新的反应和重做世界。我有一个关于路由器的问题。下面是我的应用程序组件

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;

类应用程序扩展了React.PureComponent{
render（）{
返回(
);
}
}
导出默认应用程序；

我的列表类如下所示：

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;

导出类列表扩展React.PureComponent{
建造师（道具）{
超级（道具）；
此.state={
伊索彭：错，
};
this.depositHandletogle=this.depositHandletogle.bind（this）；
}
DepositHandletogle=（）=>{
this.props.dispatch（push（`this.props.match.url}/deposit`）；
}
render（）{
const{match}=this.props；
返回(
开放模态
);
}
}
导出默认列表；

所以我的问题是：当我点击列表容器中的按钮时，为什么我的路由器找不到这个url‘localhost:xxx/List/deposit’？它呈现应用程序组件，但不会返回到列表组件。是否可以将自定义路由放在我的列表容器中？我做错什么了吗？请有人帮我做这个

我希望你能理解我的问题。提前谢谢

回答：

我找到了答案，问题出现在我的应用程序组件列表中。我有“精确”关键字，这就是为什么我的列表组件中的路由不起作用。下面的方法是正确的方法

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

我希望这将帮助某人。

从'react router dom'导入{Link}；
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;

类App扩展了React.PureComponent{
render（）{
返回(
);
}
}
导出默认应用程序；
导出类列表扩展了React.PureComponent{
建造师（道具）{
超级（道具）；
}
render（）{
const{match}=this.props；
返回(
开放模态
);
}
}
导出默认列表；

---

在该组件中，您应该处理模式打开/关闭。

您能给我一个示例吗？请参见示例我会检查此项，url是“localhost:xxx/list”，但我希望它是“localhost:xxx/list/存款”。而且它不会触发模态组件渲染方法？我的意思是你们应该在应用程序组件中定义它，在其他组件和路由中定义它。