添加 createBrowserHistory 后反应路由器，应用程序未按预期工作 [英] React router after adding createBrowserHistory, the app is not working as expected

问题描述

我将版本 1-rc 用于 react 路由器.我的路由配置如下所示:

<Route path="/" component={App}><IndexRoute 组件={关于}/><Route path="about" component={About}/><Route path="user" component={User}/></路线></路由器>

访问网址如下:http://localhost:3001/assets#(入口点)http://localhost:3001/assets#/about?_k=3mr0ay>

但是，当我向路由添加 createBrowserHistory 支持时:

<Route path="assets/" component={App}><IndexRoute 组件={关于}/><Route path="about" component={About}/><Route path="user" component={User}/></路线></路由器>

应用无法正常运行.

错误是:

<块引用>

警告:位置/assets"与任何路线都不匹配

即使我将/assets 添加到路径中，它仍然无法正常工作.

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

解决方案

RC1 中有一些新的东西，其中之一是 History 现在被分离到另一个 repo 中，所以你不再从 React Router 本身import它.相反，您使用 History.所以你需要npm install history.

还要确保在迁移到 1.0.0-rc1 时删除 node_modules 并重新安装它们:

rm -rf node_modules &&npm 安装

我只是给你举个例子:

import React, { PropTypes, Component } from 'react';从'history/lib/createBrowserHistory'导入createBrowserHistory；从反应路由器"导入{路由器，路由，链接，索引路由}；类导航扩展组件{使成为() {返回 (<div><ul><li><Link to='/'>Main</Link></li><li><Link to='/about'>关于</Link></li><li><Link to='/contact'>联系方式</Link></li>

);}};类接触扩展组件{使成为() {返回<div>联系方式</div>;}}类关于扩展组件{使成为() {return ( <div>About</div> );}}类 Home 扩展组件 {使成为() {返回<div>主页</div>;}}类 App 扩展组件 {使成为() {返回 (<div><h1>应用</h1><导航/>{this.props.children}

);}}导出默认类根扩展组件{使成为() {返回 (<路由器历史={createBrowserHistory()}><Route path='/' component={App}><IndexRoute 组件={Home}/><Route path='about' component={About}/><Route path='contact' component={Contact}/></路线></路由器>);}}

可以在 React Router 文档 和 升级指南.

I used the version 1-rc for react router. My route config is something like below:

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

And the access url is like below: http://localhost:3001/assets# (entry point) http://localhost:3001/assets#/about?_k=3mr0ay

However, when I added the createBrowserHistory support to the Route:

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

The app is not working correctly.

The error is:

Warning: Location "/assets" did not match any routes

Even I add the /assets to the path it is still not working.

What's the correct way of doing this?

解决方案

There are a few things which are new in RC1, one of them is that the History is now separated into another repo, so you no longer import it from React Router itself. Instead you use the History. So you need to npm install history.

Also make sure that you remove your node_modules and install them again when migrating to 1.0.0-rc1:

rm -rf node_modules && npm install

I just put the example for you:

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>
    );
  }
}

More can be found in the React Router documentation and Upgrade Guide.

这篇关于添加 createBrowserHistory 后反应路由器，应用程序未按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！