Question

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

我已成功渲染并能够使用react-router从默认主页路由到配置文件页面。我有一个名为searchGithub的子组件作为我的导航栏，它在home和profile组件上呈现。它是一个基本搜索，它接受一个成功路由到配置文件组件/页面的查询参数profile/:username。我按照文件交换历史混合以获得更高阶函数

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

这是我的link到github回购看完整项目

我不认为问题出在我的browserHistory或我的server.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

帮助你摆脱不和谐，但我也会在这里发布。

目前，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深层嵌套组件传入其他意外网址

1 个答案: