标签: react-router-component

使用React router v4开发React应用程序.一切顺利,直到我在我的应用程序中介绍了Redux.从那以后点击链接更改路由,浏览器URL会发生变化,但是路径对应的组件没有加载.如果我注释掉Redux代码,它会很好用.可能是什么导致了这个？这是我的路由代码:

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import LeftSubDefault from './../components/left-sub-default.component';
import LeftSubOne from './../components/left-sub-one.component';
import LeftSubTwo from './../components/left-sub-two.component';
import { withRouter } from 'react-router-dom';
import { connect } from "react-redux";
import { goToLeftDefault, goToLeftOne, goToLeftTwo } from "./../actions/leftRouteActions.js";

class LeftComponent extends Component {
  render() {
    return (
      <div className="col-xs-6">
          <p>
            Current sub route: {this.props.currentRoute}
          </p>
          <ul>
            <li onClick={this.props.goToDefault}><Link to={'/'}>Go To Default</Link></li>
            <li onClick={this.props.goToSub1}><Link to={'/left-sub1'}>Go To One</Link></li>
            <li onClick={this.props.goToSub2}><Link …

我正在试图弄清楚如何在reactJS服务器端(快速)Web应用程序中动态生成站点地图.我正在使用反应路由器.

v4文档中提供的动画转换示例对我来说似乎有点费解,因为它描绘了淡入淡出相同的组件并调整背景颜色.

我正在尝试将这种技术应用于一个更真实的例子,将一个组件淡出另一个组件,但是我无法使其正常工作(它似乎只是淡出第一个,然后第二个弹出in,此转换只能以一种方式工作(后退按钮不会转换).

这是我的代码,它使用MatchWithFade示例中的精简版本:

import React from 'react';
import { TransitionMotion, spring } from 'react-motion'
import { HashRouter, Match, Miss } from 'react-router';
import Home from './components/Home';
import Player from './components/Player';
import FormConfirmation from './components/FormConfirmation';

const App = () => (
  <HashRouter>
    <div className="App">
      <MatchWithFade exactly pattern="/" component={Home} />

      <MatchWithFade pattern="/player/:playerId" component={Player} />

      <MatchWithFade pattern="/entered" component={FormConfirmation} />

      <Miss render={(props) => (
        <Home players={Players} prizes={Prizes} {...props} />
      )} />
    </div>
  </HashRouter>
);

const MatchWithFade = ({ component:Component, ...rest }) …

我是React的新手并使用React开发我的第一个应用程序.我的应用程序有一个带有4个选项卡的选项卡组件,每个选项卡的内容都设置为一个单独的组件.现在我用4种不同的路线替换标签.所以,我摆脱了选项卡,并使用react-router来设置4条路由,每条路由一条4个.

使用选项卡时,选项卡的内容将在导航到其他选项卡并返回时保持其状态.例如,假设选项卡有一个列表,用户已滚动到列表的底部.如果用户导航到另一个选项卡并返回,则列表将保持滚动到底部.这是我的应用程序所需的行为.

但是,我无法通过路由实现此行为.我注意到当我从一个路径导航到另一个路径时,组件被重新实例化(不仅仅是重新渲染).我可以这样说,因为每当组件的路由变为活动状态时,就会调用组件的构造函数.

我想实现类似于tab的行为.我知道对于Angular,有一个UI-Router-Extras库,它提供深度状态重定向(用于类似标签的导航).它在我的Angular项目中运行得非常好.但我找不到React的类似选项.我尝试过react-router和react-router-component,并在路由变为活动状态时重新实例化组件.

是否有解决方案来实现React中的路由类似行为？

我有简单的Hello World App,其中一条路线没有子路线或索引路线.使用普通路由而不是jsx sysntax 路由我.我再次使用react-router的动态路由来加载带有webpack的Hello组件.我的app.jsx文件包含以下代码.

import React from "react";
import ReactDOM from "react-dom";
import {Router, browserHistory} from "react-router";
import Hello from "./components/Hello";



const routes = [{
    path:"/",
    getComponents(location, callback) {
        require.ensure([], function (require) {
            callback(null, require('./components/Hello'))
        })
    }
}];


ReactDOM.render(
    <Router history={browserHistory}  routes={routes}/>,
    document.getElementById("container")
); 

Hello.jsx组件具有以下代码

import React from "react";
export default class Hello extends React.Component {

    render() {

        return (
            <h2>Hello World</h2>
        )
    }
}

当我只写 /questions 时，我想将我的网址重定向到 '/questions/1'

我正在摆弄react-router,试图实现简单的路由.我在他们的例子中写了我的代码(但没有imports)https://github.com/rackt/react-router#whats-it-look-like.

我在浏览器中收到此错误:

未捕获错误:不变违规:元素类型无效:期望一个字符串(对于内置组件)或一个类/函数(对于复合组件)但得到:object.

这就是我的工作.

我在页面上附加脚本,ReactRouter.min.js我的代码在react-routes.js.而且还react和react-dom和jQuery(所有三个app.js):

<script src="/js/app.js" type="text/javascript" charset="utf-8"></script>
<script src="https://npmcdn.com/react-router/umd/ReactRouter.min.js"></script>
<script src="/js/react-routes.js" type="text/javascript" charset="utf-8"></script>

这是我的react-router.js,尚未编译:

'use strict';
window.Router = window.ReactRouter;
window.Link = window.ReactRouter.Link;
window.Route = window.ReactRouter.Route;

const Foo = React.createClass({
    render() {
        return (
            <div>
                <h1>HELLO, me FOO</h1>
            </div>
        )
    }
});

ReactDOM.render((
    <Router>
        <Route path="/" >
            <Route path="/page/one" component={Foo}/>
        </Route>
    </Router>
), document.getElementById('content-section'))

这是我react-router.js与Babel汇编后的.我在页面上正好附上了这个:

babel --presets react -o …

我是新来的反应和反应路由器。

react的问题在于，在我的应用程序的某些页面上，react-router正在工作，并且出现如下错误：“无法读取未定义的属性'push'”。

我正在使用反应0.14.1

我的路由代码如下所示：

render(
<Router history={hashHistory}>
  <Route path="/" component={Loginpanel}/>
  <Route path="Index" component={Index}/>
  <Route path="Form" component={Form} />
  <Route path="Checkindex" component={Index}/>

  <Route path="Signup" component={Signup}/>
  <Route path="Admin" component={Admin}/>
  <Route path="AdminEditDetails" component={AdminEditDetails}/>
  <Route path="AdminDetails" component={AdminDetails}/>


</Router>,
document.getElementById('js-main'));

我的组件现在是这样的：

class  App extends React.Component {

  constructor(props) {
    super(props);
    this.state= {      
      comments: AppStore.getAll();
    };
  }

  componentWillMount() {  
    var length = this.state.comments.length;
    var firstnumber = length - 4;

    if(length == 0){
      console.log("here comes");
      this.props.router.push('/');
    }
    else{
      console.log('work normally');
    }
  }

}

谁能帮我这个？谢谢。

我有一个带有NotFound组件的react-router 3.0.0设置,我将其作为后备显示:

<Route component={NotFound} path="*"/>

但是,这会返回重定向,Google抓取工具会抱怨软404.我可以重定向到我的NotFound组件并发送404,类似于Github的例子吗？我从这里尝试了以下建议:如何让路由器响应404状态代码？

<Route component={NotFound} path="*" status={404}/>

但这只是给了我404而没有显示组件.

如何实现上述目标？

Redux状态为未保存的更改保留标志,如果设置了此标志,我想在导航时单击用户(单击链接).我正在使用react-router-component.我没有在文档中找到如何做到这一点.