相关疑难解决方法(0)

测试用例

https://codesandbox.io/s/rr00y9w2wm

重现步骤

• 单击主题
• 单击Rendering with React

要么

• 转到https://rr00y9w2wm.codesandbox.io/topics/rendering

预期的行为

• match.params.topicId两个父主题组件应该是相同的,应该与match.params.topicId在Topic组件中访问时相同

实际行为

• match.params.topicId在Topic组件中访问时未定义
• match.params.topicId在主题组件中访问时正在呈现

我从这个封闭的问题中了解到,这不一定是一个错误.

此要求在想要在工厂Web应用程序中创建运行的用户中非常常见,其中Topics父级别的组件需要访问match.params.paramId,其中paramId是与嵌套(子)组件匹配的URL参数Topic:

const Topic = ({ match }) => (
  <div>
    <h2>Topic ID param from Topic Components</h2>
    <h3>{match.params.topicId}</h3>
  </div>
);

const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <h3>{match.params.topicId || "undefined"}</h3>
    <Route path={`${match.url}/:topicId`} component={Topic} />
    ... …

情况 1： 重定向到同一选项卡中的新路由。

<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} >

当我输入console.log(this.props.location.state);状态时{ foo: "bar" }，会打印出来。

情况2： 重定向到新选项卡中的新路线。

<Link to={{ pathname: "/modify_items", state: { foo: "bar" } }} target="_blank" >

当我输入时，console.log(this.props.location.state);状态变为undefined.

My goal is to pass data to a new tab. Please guide me if there is any other way to achieve this in React.js. I just want to pass data to a new tab.

我想从这个React Router获取id值：

<BrowserRouter basename="/api">
    <Switch>
        <Route path="/pm" exact component={PaymentMethod}/>
        <Route path="/pw" exact component={PaymentWeb}/>
        <Route path="/rg" exact component={Registrasi}/>
        <Route path="/bonus/:id" exact component={BonusScreen}/>
        <Route path="/hb" exact component={HistoryBonus}/>
    </Switch>
</BrowserRouter>

在我BonusScreen我试图通过使用以下命令打印值：

const userId = this.props.match.id;
console.log(this.userId);

从浏览器，我尝试像这样访问URL：

bonus/NGO628567652201

但是它总是回来了undefined。
我怎样才能解决这个问题 ？

现在我正在执行“脏”拆分以从 url 中获取任何 id。我不确定如何使用反应路由器，我做了这样的事情

this.__isEdit = (this.props.history.location.pathname.indexOf('edit') > -1)

const pathnameArr = this.props.history.location.pathname.split('/')
this.__todoId = pathnameArr[pathnameArr.length - 2] //get second last arr

对于我的路线之一

<Route exact path='/admin/ad/:id/edit' component={createTodoComponent} />

无论如何我可以改进它的代码？