javascript - React-router-dom goBack()，如何从另一个js文件继承prop？

Question

我的路由路径位于单独的文件中，仅包含路由，仅此而已，这是我在其中导入的唯一文件React-router-dom。问题是，我想在另一个 js 文件中指定一个按钮，它将执行 goBack() 函数，但我不想在这里导入 react-router-dom ，而是从 main 继承 prop js 文件。所以，我在我的 App.js 中添加了这行(这是只有路由的主文件)

constructor(props) {
        super(props);
        this.goBack=this.goBack.bind(this);
    }

    goBack(){
        this.props.history.goBack();
    }

还有按钮

<button onClick={this.goBack}>Go Back</button>

有没有办法做到这一点，或者我真的需要导入router-dom并将构造函数添加到另一个文件中？

Answer 1

您不需要在新文件中导入router-dom。您只需将 history 属性一直传递到按钮组件即可。或者，在上下文或 redux 存储变量中设置历史记录 - 希望您的后退按钮没有嵌套在组件树深处。提示:尝试让使用 router props 的组件在树中较浅，以避免穿过 router props。

我的路由器设置如下:

    <Router>
        <div>
            <Switch>
                <Public exact path="/" component={ConnectedLoginForm} {...props} />
                <Route  path="/recover-password" component={ConnectedRecoverPasswordForm}  />
                <Route  path="/reset-password/:token" component={ConnectedResetPasswordForm} />
                <Route  path="/invite/:token" component={ConnectedAcceptInviteForm} />
                <Public  path="/login" component={ConnectedLoginForm} {...props} />
                <Authenticated path="/:co_id" component={ConnectedMainView} {...props} />
            </Switch>
        </div>
    </Router>

因此，我可以访问 ConnectedMainView 组件中的 history 属性。