相关疑难解决方法(0)

如何在React Router v4中推送到历史记录?

在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.

在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.props.addProduct(props).当服务器返回成功时,用户将进入购物车页面.

// actions/index.js
export function addProduct(props) {
  return dispatch =>
    axios.post(`${ROOT_URL}/cart`, props, config)
      .then(response => {
        dispatch({ type: types.AUTH_USER });
        localStorage.setItem('token', response.data.token);
        browserHistory.push('/cart'); // no longer in React Router V4
      });
}
Run Code Online (Sandbox Code Playgroud)

如何从React Router v4的功能重定向到Cart页面?

reactjs react-router react-router-v4

315
推荐指数
12
解决办法
41万
查看次数

我应该使用react-router作为标签组件吗?

我正在寻找一个标签组件,其中一些标签将包含动态内容.我最初开始学习本教程:

使用React创建选项卡组件

在阅读react-router之后,似乎它也可以解决这个问题.什么是更好的方法和/或它有所作为?

javascript tabs reactjs react-router

9
推荐指数
1
解决办法
1万
查看次数

是否可以使用材料 ui 选项卡并仍然使用反应路由器?

在材质 ui 中Tabs 组件中自定义了代码

  <AppBar position="static">
    <Tabs
      variant="fullWidth"
      value={value}
      onChange={handleChange}
      aria-label="nav tabs example"
    >
      <LinkTab label="Page One" href="/drafts" {...a11yProps(0)} />
      <LinkTab label="Page Two" href="/trash" {...a11yProps(1)} />

    </Tabs>
  </AppBar>
  <TabPanel value={value} index={0}>
    Page Onee
  </TabPanel>
  <TabPanel value={value} index={1}>
    Page Two
  </TabPanel>
Run Code Online (Sandbox Code Playgroud)

它基本上是两个选项卡,单击其中一个会显示文本“Page Onee”,单击另一个选项卡,则会显示文本“Page Two”。

但是,我希望能够使用反应路由器,以便我可以将一个组件带到每个选项卡并分配路由。在反应路由器中,它会是这样的(我知道反应路由器还有更多的事情要做,但在选项卡代码中就是这样):

<Link class="nav-link" to="/component1">Click here to see component1</Link>

<Link class="nav-link" to="/component2">Click here to see component2</Link>
Run Code Online (Sandbox Code Playgroud)

但是在我向您展示的第一段代码中(我从材料 ui 中定制的那个)我有这些<TabPanel>标签。

有没有一种简单的方法可以将反应路由器放入其中?

如果不可能包含反应路由器,我如何仍然能够使用该材质 ui 代码呈现我的组件?

javascript jsx reactjs react-router material-ui

2
推荐指数
1
解决办法
3487
查看次数