React-router v2.0 深度嵌套组件传入其他意外 URL

Question

我一直在尝试解决过去几天在路由深度嵌套组件时遇到的问题。我正在使用 reactjs v14.6 和 react-router v2.0 与浏览器历史记录。如果我将其换成哈希历史并使用已弃用的历史混合，它会按预期工作。

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

当我尝试在个人资料页面上使用我的搜索组件时，我遇到了问题。它在 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

这是我链接到GitHub存储库以查看完整项目

我认为问题不在于我的浏览器历史记录或我的服务器.js文件，而是我的路由文件或我的一个组件中的问题。如果需要，请随时查看我上面的链接以提取完整的项目并安装依赖项。我认为这与不传入位置描述符有关，我不确定这是需要传递的第三个参数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

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

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

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

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

或

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

注意前导/