我正在尝试将Backbone.Marionette应用程序替换为React,并且在查询查询参数时遇到困难.我想我在理解这种模式时错过了一种非常简单的和平,所以如果这个问题完全是胡说八道,我会道歉.我会感谢任何支持,或者只是指出我可以更具体地谷歌的一些方向.

有一个/users列出用户的页面,您可以通过搜索栏过滤用户.因此,如果您想过滤用户名中包含"joe"的用户,我会向查询参数的服务器发出请求/users?username=joe.另外,我也可以通过添加page参数(/users?username=joe&page=1)来分页.

如果我只考虑功能,那么流程可能就是

1. 客户端插入joe到input元素并单击" 搜索".
2. 单击" 搜索"按钮将触发Action(如Action.getUser).
3. 在Action向服务器请求并接收结果
4. 将Dispatcher结果有效负载的函数调度给任何(通常是Store)感兴趣的人Action.
5. 在Store与新的结果通过接收到的状态变化Action
6. View(Component)通过聆听Store改变来重新渲染.

它按预期工作.但是,我希望客户能够为当前过滤的结果添加书签,并且能够在一段时间之后返回到同一页面.这意味着我需要在某处保存关于客户所做搜索词的明确信息,这通常是网址(我是对的吗？).所以我需要用查询参数更新url以保存搜索词(/users?username=joe&page=1).

我感到困惑的是在何时何地更新网址？我现在能想到的是下面的两个选项 - 它们似乎根本不干净.

选项1

1. 客户端插入joe到input元素并单击" 搜索".
2. 单击" 搜索"按钮将使用新查询params(/users?username=joe&page=1)触发ReactRouter的转换.
3. View(Component)通过this.props.params和接收新的参数this.props.query.
4. View(Component)根据它收到的查询参数触发Action类似的Action.getUser东西 - 在这种情况下username=joe&page=1.

在此之后,它与上面相同

选项2(只有6个与我上面解释的不同)

1. 客户端插入joe到input元素并单击" …

我正在使用react-router进行路由,我使用hashHistory选项,以便我可以从浏览器刷新页面或指定我现有路由的URL并登陆到右侧页面.它工作正常,但我看到网址中的哈希是这样的: http:// localhost /#/ login？_k = ya6z6i

这是我的路由配置:

ReactDOM.render((
 <Router history={hashHistory}>
    <Route path='/' component={MasterPage}>
      <IndexRoute component={LoginPage} />
      <Route path='/search' component={SearchPage} />
      <Route path='/login' component={LoginPage} />
      <Route path='/payment' component={PaymentPage} />
    </Route>
  </Router>),
    document.getElementById('app-container'));

我目前正在开发基于CMS的项目.

我正在使用erikras的通用反应redux样板

我真的需要处理动态路由的建议

让我们从样板中采取一个简单的场景......

在routes.js中

<Route path="about" component={About}/>
<Route path="login" component={Login}/>
<Route path="survey" component={Survey}/>
<Route path="widgets" component={Widgets}/>

data.js

export const data = [
  {id: 1, property: 'Dashboard', link: '/'},
  {id: 2, property: 'Login', link: '/login'},
  {id: 3, property: 'About Us', link: '/About'},
];

现在,假设在用户角色的基础上,json数据中的属性将发生变化

让我们说新的财产:是

{id: 4, property: 'test page', link: '/test'}

当react会呈现组件时,它如何知道路由链接......因为它没有在routes.js中定义

我没有得到正确的方法来实现它

我们需要根据用户角色由特定菜单内容组成的侧边栏.

假设我们正在建立预订系统,可以有不同的用户角色,如管理员,维护模式,助理角色.

因此,不同的角色将具有不同的属性,因此我们需要在其基础上生成菜单,因为属性肯定会根据用户角色而不同.

谢谢!!

我正在使用反应路由器.我想从我来自的地方检测上一页(在同一个应用程序中).我在我的上下文中有路由器.但是,我没有在路由器对象上看到任何属性,如"上一个路径"或历史记录.我该怎么做？

我们可以使用导航到不同的路径

this.props.router.push('/some/path')

有没有办法在导航时发送params(对象)？

还有其他我可以想到的选择,但是想知道是否可以通过object？

• 我可以嵌入对象的id并从新页面重新从服务器中获取对象.

• 或者我可以将对象存储在全局存储中,如redux store.(这个对象需要很快从商店中删除.所以我认为把它放在那里可能不太好)

我有一个这样的组件:

<Parent>
  <Child/>
</Parent>

和<Child/>组件有一个方法foo.我想测试foo方法,但我不知道如何访问它.我试过了:

mount(<Parent><Child/></Parent>).props().children.foo

要么

mount(<Parent><Child/></Parent>).children().foo

但他们都是undefined.我无法使用,.instance()因为它不是root.我无法挂载<Child/>只是因为<Parent>添加了一些东西(react-router's context.router),context而我在init时需要它们<Child/>.有这个想法吗？

我正在使用来自react-router v4 jest的组件进行测试<Link>.

我收到一个警告,<Link />需要来自react-router <Router />组件的上下文.

如何在测试中模拟或提供路由器上下文？(基本上我该如何解决此警告？)

Link.test.js

import React from 'react';
import renderer from 'react-test-renderer';
import { Link } from 'react-router-dom';

test('Link matches snapshot', () => {
  const component = renderer.create(
    <Link to="#" />
  );

  let tree = component.toJSON();
  expect(tree).toMatchSnapshot();
});

测试运行时的警告:

Warning: Failed context type: The context `router` is marked 
as required in `Link`, but its value is `undefined`.

我正在尝试以编程方式更改页面使用browserHistory.push.在我的一个组件中,但不在我嵌入在那个组件中的组件中.

有谁知道为什么我的项目只是为子组件而不是父组件抛出错误？

无法读取undefined属性'push'

父组件

import React, {Component} from 'react';
import { browserHistory } from 'react-router';
import ChildView from './ChildView';

class ParentView extends Component {

constructor(props) {
    super(props);
    this.addEvent = this.addEvent.bind(this);
  }

changePage() {
    this.props.history.push("/someNewPage");
  }

render() {
    return (
      <div>
        <div>
          <button onClick={this.changePage}>Go to a New Page!</button>
        </div>

        <ChildView />  // this is the child component where this.props.history.push doesn't work 

      </div>
    );
  }
}

function mapStateToProps(state) {
    return {
        user: state.user
    };
}

function matchDispatchToProps(dispatch) {
    return bindActionCreators({ …

我需要使用React Router一个Laravel项目.

但是当我创建路由器React Router并尝试访问时,Laravel指责Route not exists错误.

如何使用React Router经理Laravel项目路线？

render((
    <Router history={browserHistory}>
        <Route path="/" component={App}/>
        <Route path="/profile" component={Profile}/> // this route I trying access
    </Router>
), document.getElementById('root'));

我正在尝试在 create-reat-app 中使用 react-router 和 reactstrap。在路由页面中，我需要使用 reactstrap 的状态，因此我将路由器从变量转换为类。我收到此警告：警告： validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 我不知道该怎么做？，我需要使用 reactstrap 来设置路由器导航的样式，所以我做了你在下面看到的。

由于很多原因，这不起作用：

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

除了几个 li 随机靠近彼此，我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息，没有什么不好的事情发生，但是当我读到这个的时候问题我发现我不应该这样做。