react-router v2.0 深层嵌套组件传入额外的意外 url

Question

我一直在尝试解决过去几天遇到的一个问题，即路由深层嵌套组件。我正在使用带有 browserHistory 的 reactjs v14.6 和 react-router v2.0。如果我将它换成 hashHistory 并使用已弃用的 history mixin，它会按预期工作。

我已经成功呈现并能够使用 react-router 从默认主页路由到配置文件页面。我有一个名为 searchGithub 的子组件作为我的导航栏，它在主页和配置文件组件上呈现。它采用查询参数 profile/:username 的基本搜索，成功路由到配置文件 component/page。我遵循了关于将历史混合换成高阶函数的文档

当我尝试在个人资料页面上使用我的搜索组件时遇到了问题。它在 url 中添加了一个额外的 /profile。例如从主页上它会是正确的路线 http://localhost:3000/profile/tyler 但如果我在个人资料页面上并尝试搜索用户名 url 而不是 http://localhost:3000/profile/profile/tyler 导致错误 Warning: [react-router] Location "/profile/profile/tyler" did not match any routes

这是我的 link 到 github 的回购协议以查看完整项目

我认为问题不在于我的 browserHistory 或我的 server.js 文件，而在于我的路由文件或我的组件之一。请随时查看我上面的 link 以提取完整项目并在需要时安装依赖项。我认为这与不传递位置描述符有关，我不确定是否也需要传递第三个参数 this.context.router.push()

这是我的 /App.jsx 组件

var React = require('react');
var ReactDom = require('react-dom');
var Router = require('react-router').Router;
var routes = require('./config/routes');
var browserHistory = require('react-router').browserHistory;

ReactDom.render(
  <Router history={browserHistory} routes={routes} />,
  document.getElementById('app')
);

这是我的 /routes.jsx

var React = require('react');
var Main = require('../components/Main');
var Home = require('../components/Home');
var Profile = require('../components/Profile');
var Router = require('react-router');
var Route = Router.Route;
var IndexRoute = Router.IndexRoute;

module.exports = (
  <Route path="/" component={Main}>
    <Route path="profile/:username" component={Profile} />
    <IndexRoute component={Home} />
  </Route>
);

这是我的 /SearchGithub.jsx

var React = require('react');
var Router = require('react-router');

var SearchGithub = React.createClass({
  contextTypes: {
    router: React.PropTypes.object.isRequired,
  },

  getRef: function(ref) {
    this.usernameRef = ref;
  },

  handleSubmit: function() {
    var username = this.usernameRef.value;
    this.usernameRef.value = '';
    this.context.router.push('profile/' + username, null);
  },

  render: function() {
    return (
      <div className="col-sm-12">
        <form onSubmit={this.handleSubmit}>
          <div className="form-group col-sm-7">
            <input type="text" className="form-control" ref={this.getRef} />
          </div>
          <div className="form-group col-sm-5">
            <button type="submit" className="btn btn-block btn-primary">Search Github</button>
          </div>
        </form>
      </div>
    );
  },
});

module.exports = SearchGithub;

这是我的 /main.jsx

var React = require('react');
var SearchGithub = require('./SearchGithub');

var Main = React.createClass({
  render: function() {
    return (
      <div className="main-container">
        <nav className="navbar navbar-default" role="navigation">
          <div className="col-sm-7 col-sm-offset-2" style={{ marginTop: 15 }}>
            <SearchGithub />
          </div>
        </nav>
        <div className="container">
          {this.props.children}
        </div>
      </div>
    );
  },
});

module.exports = Main;

我觉得它与 router.push({ pathname, query, state }) // new "location descriptor" 有关，希望有人能帮助我，因为我一直在努力找出我做错了什么。我也很好奇如果这实际上是导致我的问题的原因，我将如何实现位置描述符

Answer 1

帮助你解决了不和谐问题，但我也会post在这里。

目前 react-router + history 不能很好地协同工作以进行相对转换。请在此处查看相关的 github 问题 - https://github.com/rackt/history/issues/135.

此外，您应该只将路径名传递给路由器，或者将位置描述符传递给单个对象。

 this.context.router.push('/profile/' + username);

或

this.context.router.push({ pathname: '/profile/' + username });

注意前导/

react-router v2.0 深层嵌套组件传入额外的意外 url

react-router v2.0 deep nested component passing in additional unexpected url

reactjs

react-router

react-router-component

react-routing