Question

我使用版本1-rc作为反应路由器。我的路线配置如下所示：

<Router>
  <Route path="/" component={App}>
    <IndexRoute component={About} />
    <Route path="about" component={About} />         
    <Route path="user" component={User} />       
  </Route>
</Router>

访问网址如下： http://localhost:3001/assets#（切入点） http://localhost:3001/assets#/about?_k=3mr0ay

但是，当我向Route添加createBrowserHistory支持时：

<Router history={createBrowserHistory()}>
  <Route path="assets/" component={App}>
    <IndexRoute component={About} />
    <Route path="about" component={About} />         
    <Route path="user" component={User} />       
  </Route>
</Router>

该应用无法正常运作。

错误是：

警告：位置“/ assets”与任何路线都不匹配

即使我将/ assets添加到仍未运行的路径中。

这样做的正确方法是什么？

Answer 1

RC1中有一些新功能，其中之一就是History现在被分成另一个回购，因此您不再{Reid路由器本身import。而是使用History。所以你需要npm install history。

另外，请确保在迁移到1.0.0-rc1时删除node_modules并重新安装它们：

rm -rf node_modules && npm install

我刚才为你举了一个例子：

import React, { PropTypes, Component } from 'react';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Router, Route, Link, IndexRoute } from 'react-router';

class Navigation extends Component {
  render() {
    return (
      <div>
        <ul>
          <li><Link to='/'>Main</Link></li>
          <li><Link to='/about'>About</Link></li>
          <li><Link to='/contact'>Contact</Link></li>
        </ul>
      </div>
    );
  }
};

class Contact extends Component {
  render() {
    return <div>Contact</div>;
  }
}

class About extends Component {
  render() {
    return ( <div>About</div> );
  }
}

class Home extends Component {
  render() {
    return <div>Home</div>;
  }
}

class App extends Component {
  render() {
    return (
      <div>
        <h1>App</h1>
        <Navigation />
        {this.props.children}
      </div>
    );
  }
}

export default class Root extends Component {
  render() {
    return (
      <Router history={createBrowserHistory()}>
        <Route path='/' component={App}>
          <IndexRoute component={Home} />
          <Route path='about' component={About} />
          <Route path='contact' component={Contact} />
        </Route>
      </Router>
    );
  }
}

可在React路由器documentation和Upgrade Guide中找到更多内容。

添加createBrowserHistory后反应路由器，应用程序未按预期工作

1 个答案: