Question

我正在使用react-router，所以我在整个应用程序中使用<Link />组件作为我的链接，在某些情况下我需要根据用户输入动态生成链接，所以我需要像window.location，但没有刷新页面。

我发现了这个小记 - （https://github.com/rackt/react-router/issues/835） - 我尝试使用this.context.router.transitionTo(mylink)，但我遇到了上下文问题......

导致我（https://github.com/rackt/react-router/issues/1059），但是上下文返回并且是空对象，所以当我尝试像：this.context.router.transitionTo(mylink);时，我得到Cannot read property 'transitionTo' of undefined（如果我尝试做类似的事情）在构造函数中设置this.context = context）。

不要拖延，但我也厌倦了过多地干扰上下文，因为它没有故意记录，因为它仍在进行中，所以我已经阅读了。

有没有人遇到过类似的问题？

Answer 1

在此处找到解决方案：https://github.com/rackt/react-router/issues/975，此处：https://github.com/rackt/react-router/issues/1499

构造函数需要：

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

还需要添加一个静态属性：

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

然后我可以打电话：

this.context.router.transitionTo(/path-to-link);

Answer 2

如果您使用BrowserHistory用于React-router，生活会更简单。

import {browserHistory} from "react-router";

functionName() {
 browserHistory.push("/path-to-link");
}

Answer 3

浪费时间与反应路由器，我终于切换到基本的JavaScript。

为重定向创建一个组件：

路径路径=“*”component = {NotFound}

在组件中使用window.location重定向：

 componentDidMount() {
      if (typeof window !== 'undefined') {
           window.location.href = "http://foo.com/error.php";
      }
 }

Answer 4

看一下来自react-router的Navigation mixin。 http://rackt.github.io/react-router/#Navigation

来自文档：

var Navigation = require('react-router').Navigation;

React.createClass({
  mixins: [Navigation],

  render: function() {
    return (
      <div onClick={() => this.transitionTo('foo')}>Go to foo</div>
      <div onClick={() => this.replaceWith('bar')}>Go to bar without creating a new history entry</div>
      <div onClick={() => this.goBack()}>Go back</div>
    );
  }
});

Answer 5

在这种情况下，我通常会使用hashHistory或browserHistory，具体取决于您使用的内容，只需拨打hashHistory.push(<url>)即可。如果您使用的是ES6课程，您还可以使用react-router提供的withRouter Hoc here。此高阶组件在组件中公开名为router的prop。使用此道具，您可以使用this.props.router.push(<url>)重定向。

如果您必须在上下文中使用路由器，则必须提供@ Ben的答案中提到的上下文类型。

Answer 6

使用 Dashboard 中的 const tiers = [ { title: "Half pound boxes", price: "10", description: [ "Sunflower Shoots", "Pea Shoots", "Radish Shoots", "Broccoli Shoots", ], buttonText: <HalfPound />, buttonVariant: "outlined", }, { title: "Grasses", subheader: "Tray", price: "15", description: ["Wheatgrass", "Barleygrass"], buttonText: <Grasses />, buttonVariant: "contained", }, { title: "Sunny Sampler Box", price: "20", description: [ "6oz Sunflower", "2oz Broccoli", "3oz Sweet Pea", "2oz Radish", ], buttonText: <SunnySampler />, buttonVariant: "outlined", }, ];，在我的代码段中我使用的是 <Container maxWidth='md' component='main'> <Grid container spacing={5} alignItems='flex-end'> {tiers.map((tier) => ( // Enterprise card is full width at sm breakpoint <Grid item key={tier.title} xs={12} sm={tier.title === "Enterprise" ? 12 : 6} md={4} > <Card> <CardHeader title={tier.title} subheader={tier.subheader} titleTypographyProps={{ align: "center" }} subheaderTypographyProps={{ align: "center" }} action={tier.title === "Pro" ? <StarIcon /> : null} className={classes.cardHeader} /> <CardContent> <div className={classes.cardPricing}> <Typography component='h2' variant='h3' color='textPrimary'> ${tier.price} </Typography> <Typography variant='h6' color='textSecondary'> /each </Typography> </div> <ul> {tier.description.map((line) => ( <Typography component='li' variant='subtitle1' align='center' key={line} > {line} </Typography> ))} </ul> </CardContent> <CardActions> <Button fullWidth color='primary'> {tier.buttonText} </Button> </CardActions> </Card> </Grid> ))} </Grid> </Container>

Link

Answer 7

最佳解决方案;）

import {useHistory } from 'react-router-dom';

export default function ModificarUsuario({ url }) {
  const history = useHistory();
  
  function newRoute(){
    history.push('/my-route')
  }
  
}

如何使用react-router和ES6类模拟window.location

7 个答案: