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

Question

我的路由路径位于单独的文件中，仅包含路由，仅此而已，这是我在其中导入的唯一文件 React-router-dom。问题是，我想在另一个 js 文件中指定一个按钮，它将执行 goBack() 函数，但我不想在此处导入 react-router-dom，而是从主 js 文件继承 prop。所以，我在 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 存储变量中设置 history 属性——希望你的后退按钮没有嵌套在组件树的深处。提示：尝试让你的组件在你的树中浅层使用路由器道具，以避免通过路由器道具。

我的路由器设置如下：

    <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 道具。

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

React-router-dom goBack(), how to inherit prop from another js file?

javascript

reactjs

react-router

react-router-dom