Я должен использовать this.props.history.push('/...') во вложенном компоненте, поэтому я добавил с маршрутизатором () для навигации без проблем с историей, используя react-router-dom.
Но так как я добавил withRouter, у меня ошибка Вы не должны использовать Route вне Router. Я читал сообщения об этой ошибке, но не могу понять, что не так с моим кодом.
Корень.js:
import { BrowserRouter as Router, Route, Switch, Redirect, withRouter} from 'react-router-dom'
...
const Root = ({ store }) => (
<Router>
<Provider store = {store}>
<StripeProvider apiKey = "pk_test_XXXXXXXXX">
<Switch>
<Route exact path = "/" component = {App} />
<Route path = "/comp1" component = {Comp1} />
<Route path = "/comp2" component = {Comp2} />
<Route path = "/store" component = {MyStoreCheckout} />
<Route component = {Notfound} />
</Switch>
</StripeProvider>
</Provider>
</Router>
)
Root.propTypes = {
store: PropTypes.object.isRequired
}
export default withRouter(Root)
и index.js:
import { createStore } from 'redux'
import myReducer from './redux/Reducers/myReducer'
import Root from './Root'
import Store from './redux/Store/store'
render(<Root store = {Store} />, document.getElementById('root'))
Я использую withRouter, чтобы вызвать this.props.history(...) в CheckoutForm. MyStoreCheckout.js:
class MyStoreCheckout extends React.Component {
render() {
return (
<Elements>
<InjectedCheckoutForm />
</Elements>
);
}
}
export default MyStoreCheckout;
CheckoutForm.js:
class CheckoutForm extends React.Component {
handleSubmit = () => {
fetch(getRequest)
.then((response) => response.json())
.then(...)
.then(() => this.goToSuccessPage())
}
goToSuccessPage(){
this.props.history.push('/') ; //----- error is here if I have no withRouter
render() {
return (
<form onSubmit = {this.handleSubmit}>
<DetailsSection/>
<CardSection />
<button>Confirm order</button>
</form>
);
}
}
export default injectStripe(CheckoutForm);
@BlunderingPhilosopher Я отредактировал свой вопрос. Как я могу использовать withRouter, чтобы получить доступ к странице в CheckoutForm?
Просто сделайте import { withRouter} from 'react-router-dom'
в верхней части вашего CheckoutForm
файла, затем оберните injectStripe(CheckoutForm)
его вот так: withRouter(injectStripe(CheckoutForm))
Как я упоминал в своем комментарии... Просто импортируйте withRouter
вверху вашего файла CheckoutForm
, а затем оберните им экспорт внизу. Так:
CheckoutForm.js:
import { withRouter} from 'react-router-dom'
class CheckoutForm extends React.Component {
// ... your class code ...
}
export default withRouter(injectStripe(CheckoutForm));
Если ваш injectStripe
HOC не передает все реквизиты от withRouter
до CheckoutForm
, вы можете вместо этого попробовать сделать export default injectStripe(withRouter(CheckoutForm));
, но порядок не должен иметь значения (если настроено правильно)
да,
withRouter
можно использовать только в компоненте, который вложен в<Router>
- например, в вашем коде,StripeProvider
,App
,Comp1
,Comp2
,NotFound