我正在使用最新版本的create-react-app,mobx-react,material-ui和react-router。当我尝试使用Redirect
组件重定向到其他组件时,它不起作用。然后我遵循了这个answer,问题仍然存在。
我的代码:
//App.js
// other imports
import { withStyles } from '@material-ui/core/styles';
import Cart from "./stores/Cart";
const cart_counter = new Cart();
class App extends Component {
render() {
return (
<Router>
<React.Fragment>
<Route path="/" exact render={(props) => <Index {...props} cart_counter={cart_counter}/>} />
<Route path="/product/:slug" render={(props) => <Product {...props} cart_counter={cart_counter}/>} />
</React.Fragment>
</Router>
);
}
}
export default App;
// Index.js
class IndexComponent extends React.Component {
moveToProduct(slug) {
return <Redirect push to={"/product/" + slug} />;
}
render() {
return (
<Grid item xs={6} sm={3} key={product.id}>
<Card onClick={() => {this.moveToProduct(product.slug)}}>
</Grid>
)}
const Index = withRouter(observer(IndexComponent));
export default withStyles(styles)(Index);
答案 0 :(得分:1)
必须渲染Redirect
,但是现在您只需单击一下即可返回它。您必须在点击上设置一个已定义状态,这将有条件地呈现您的Redirect
。一个布尔值将完成这项工作。