我在Rect中创建chrome扩展名。如何通过在react chrome扩展程序中按按钮重定向到另一个组件？
我如何才能从App组件（按按钮后）重定向到ItemDetails组件？不使用条件（三元运算符）。
我发现了这样一篇文章：用React写的Chrome扩展中的路由
import { createMemoryHistory } from 'history'
const history = createMemoryHistory()
render() {
let page = null
switch (this.state.page) {
case 'home':
page = <Home />
break
case 'user':
page = <User />
break
}
return page
}
我不明白这一点this.state.page。如果我要转到其他组件，该如何获取this.state.page。如何以要进入的状态保存组件名称？
import React, { Component } from 'react';
import { render } from 'react-dom';
import axios from 'axios';
class ItemDetails extends Component {
constructor(){
super();
}
render() {
return (
<div>
<p>
Description:vvvvvvvvvvv
</p>
</div>
)
}
}
class App extends React.Component {
constructor() {
super();
this.state = {
items: [
{
name: 'A',
description: 'Hello'
}
],
form: {}
};
}
render() {
return (
<div>
<form action="" method="post" onSubmit={this.onSubmit}>
<button type="submit" value="Submit" >Log in</button>
</form>
</div>
);
}
}
render(<App />, document.getElementById('root'));
您需要使用Routes重定向到其他组件。你可以像这样
import { BrowserRouter, Route, Switch } from "react-router-dom";
<BrowserRouter>
<Switch>
<Route exact path='/' component={Dashboard} />
<Route exact path='/itemDetails' component={ItemDetails} />
</Switch>
</BrowserRouter>
在您需要重定向按钮的组件中，您需要使用withRouter。
import { withRouter } from 'react-router-dom';
class Dashboard extends React.Component {
onSubmit = () => {
this.props.history.push('/itemDetails');
}
render() {
return (
<div>
<form onSubmit={this.onSubmit}>
<button type="submit" >Log in</button>
</form>
</div>
);
}
}
export default withRouter(Dashboard)
注意：请勿action="" method="post"在表单上使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句