标签: react-router-dom

使用以前的react-router，我可以做到这一点：

import {browserHistory} from 'react-router';

从我的actionCreators文件中，我可以执行以下操作：

...some async action completed (for example, user logged in successfully)..
browserHistory.push('/dashboard');

但是随着新的react-router-dom（v4）的出现，我似乎无法再像那样导入browserHistory，并且访问历史对象的唯一方法是从React组件props

this.props.history

使用react-router-dom完成异步redux操作后，如何将用户重定向到新页面？

当我使用带有Redirect的反应路由器时,Link或NavLink eveything就可以了.但我需要一个以编程方式导航我到路线的功能.

这就是我想要的:

if(a == 1){
    this.context.history.push("/")
}
else {
    this.contetx.history.push("/home");
}

如您所见,反应路由器v4中不再存在上下文历史记录.我无法在js代码中编写withroute用于导航.谁能说我如何直接在js代码中导航？

谢谢

这是我的两条路线，当我导航到/ blogs / new BlogsShow组件时，它也正在运行。如何预防。

<Route path="/blogs/new" component={BlogsNew} />
<Route path="/blogs/:id" component={BlogsShow} />

我想将history道具从传递App到 Navigation 组件。当我尝试这样做时，我收到以下错误消息：

失败的道具类型：道具history在 中标记为必需Navigation，但其值为undefined。

我该如何解决这个问题？

应用程序.js：

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

const App = props => (
  <Router>
      <MainLayout {...props}>
        <Switch>
          <Route exact name="index" path="/" component={Index}/>
          <Route component={NotFound}/>
        </Switch>
      </MainLayout>
  </Router>
);

主布局.js：

import React from "react";
import PropTypes from "prop-types";
import Navigation from "../../components/Navigation/Navigation";

const MainLayout = props => {
  const { children, authenticated, history } = props;

  return (
    <div>
      <Navigation authenticated={authenticated} …

我正在尝试在我的组件之一中进行嵌套路由。

这是父组件：

const App = () => (
  <BrowserRouter>
    <Provider store={store}>
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route path="/contribute" component={Contribute} />
      </Switch>
    </Provider>
  </BrowserRouter>
);

这是子组件：

const Landing = () => (
  <div>
    <SearchBar />
    <section className="results-sctn">
      <Route exact path="/" component={ArtistList} />
      <Route path="/test" component={Test} />
    </section>
  </div>
);

ArtistList可以很好地呈现/路线，但/test呈现完全空白的页面。知道为什么会这样吗？

我正在react-router-dom用于实现我的 reactjs 应用程序的路由！但是我对此有一个问题，在该问题中我找不到任何可在页面更改时滚动到顶部的有效解决方案。有谁能够帮助我？？？

这是我的路由代码段：

    <BrowserRouter  basename={basename}> 
          <Switch>
                    <MobilePage hasNav navType="primary" exact path={`/restaurant`} component={VendorList} />
                    <MobilePage hasNav navType="primary" path={`/restaurant/:vendorCode`} component={VendorDetails} /> 
          </Switch>
    </BrowserRouter>

我正在使用Link in react来重定向到外部链接,如下所示:

<div className="btn-footer-padd">
    <Link className="career-btn sourceSansPro-sanSerif"
        target="_blank" 
        to="https://google.com"
    >Careers</Link>
</div>

现在,当我尝试它时,重定向如下:

http://myweburl/http://https://google.com

我想要的是重定向到这个:

http://https://google.com

任何的想法？

如何在 ag-grid 中替换 react-router-dom 的 with。它使页面重新加载，而不是伪装成单页应用程序。

我试过这个，但它不起作用

cellRenderer:  (params)=> {
  return <Link to={`/?info=${params.data.Id}`}>"+{params.value}+"</Link>, 

是否有可能我们可以使用 Link 而不是

cellRenderer:  function(params){
  return "<a href='/?info=" + params.data.Id+ "'>"+params.value+"</a>";},

使用 Link 时，它会抛出错误：

错误：ag-Grid：在绘制行的中间时无法获取网格以绘制行。您的代码可能在网格处于渲染阶段时调用了网格 API 方法。为了克服这个问题，将 API 调用置于超时状态，例如调用 setTimeout(function(){api.refreshView(),0}) 而不是 api.refreshView()。要查看导致刷新的代码部分，请检查此堆栈跟踪。

堆栈跟踪中的错误指向下面的代码，但使用元素它可以正常工作：

===> GetAPI(){ var url = xxxxxxxxxxx; axios.get(url).then(response => { if (response.status == 200) { this.setState({patients: response.data, loading: false }); } }) .catch(e => console .log('获取费用列表时出错：在 Listing/index.js > 错误：', e.message,'\n for user : ',this.props.auth.user.email)) }.

作为reactJS的初学者，我想知道当我路由到子组件URL时如何隐藏父组件

假设一个场景：

用户位于“ / house”，如下所示：

<Route path="/house" component={House} />

当用户单击房屋网格时，他导航到“ / house / flat /：flatID”。内部房屋组件

<Route
    path={`${this.props.match.url}/flat/:flatId`}
    render={() => <div>Each Flat details</div>}
/>

那么子组件和父组件都是可见的，如下所示：

所以我想要的是当用户导航到“ / house / flat：FlatId”时仅显示平面组件。请给我建议任何有帮助的东西！文章的任何链接，以便我可以学习并实现这种功能。

码：

App.js

<Switch>
    <Route exact path="/" component={Home} />
    <Route exact path="/account" component={Account} />
    <Route path="/gharjagga" component={GharJagga} />
</Switch>

House.js

onGharGridClick= id => {
    <Redirect to={`${this.props.match.url}/flat/${id}`} />;
};

return (
    <Route
        path={`${this.props.match.url}/flat/:fkatId`}
        render={() => <div>Ghar Each</div>}
    />
);

我有以下代码：

<Link to="/dashboard" style={{ color: '#A4A4A4' }}>Dashboard</Link>

作为我的应用程序的一部分，但是如果我当前正在查看/dashboard路线，则该页面不会刷新。

为什么？我该如何刷新呢？