标签: react-router

我正在努力为<Link/>我的材料添加组件-ui AppBar

这是我的导航类:

class Navigation extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    var styles = {
      appBar: {
        flexWrap: 'wrap'
      },
      tabs: {
        width: '100%'
      }
    }

    return (
      <AppBar showMenuIconButton={false} style={styles.appBar}>
        <Tabs style={styles.tabs}>
          <Tab label='Most popular ideas'/>
          <Tab label='Latest ideas' />
          <Tab label='My ideas' />
        </Tabs>
      </AppBar>
    )
  }
}

看起来没问题:

标签是可点击的,有流畅的动画,这很酷.但是如何将它们react-router和它的<Link/>组件连接在一起？

我试过添加这样的onChange监听器:

<Tab
  label='My ideas'
  onChange={<Link to='/myPath'></Link>}
/>

但是我收到以下错误:

Uncaught Invariant Violation: Expected onChange listener to be a …

我等不及了,我开始使用react-routerv4 的最新alpha版本.全新<BrowserRouter/>功能非常适合保持您的UI与浏览器历史记录同步,但如何使用它以编程方式进行导航？

我需要使用路由器将props传递给组件.这是我的代码:

import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import AppBarTop from './appbar/AppBarTop';

import Login from '../pages/login/Login';
import {BrowserRouter as Router, Route} from 'react-router-dom';


class App extends Component {

    render() {

        const { isAuthenticated } = this.props;

        return (
            <Router>
                <div>
                    <AppBarTop isAuthenticated={isAuthenticated} />
                    <div className="content">
                        <Route path="/login" isAuthenticated={isAuthenticated} component={Login} />
                    </div>
                </div>
            </Router>
        );
    }
}

如您所见,isAuthenticated我要传递给Login组件的prop.

class Login extends Component {

    constructor(props) {
        super(props);
        console.log(props);
    }

    render() {
        return (
            <LoginForm /> …

使用反应路由器我已经完成了更新网址：

this.props.history.push({
            pathname: `/product/${this.props.product.id}`,
        });

但是，这会导致重新渲染/导航更改。有没有办法在不这样做的情况下更新网址？

我的用例是我有一个产品列表，当我点击一个产品列表时，我会显示一个模态并希望将 url 更新为 example.com/product/1 之类的内容，以便链接可以共享。

我认为路线更改会触发对图标的请求,这很奇怪.

这是打算还是在这里发生了什么？

我正在做一个使用react,redux和express的项目,我不明白react-router和express routes.js有什么区别,我需要将两者结合起来还是只使用一个？

https://github.com/reactjs/react-router

谢谢您的帮助 :)

我真的没有得到如何约束params,例如正则表达式.
如何区分这两条路线？

  <Router>
    <Route path="/:alpha_index" component={Child1} />
    <Route path="/:numeric_index" component={Child2} />
  </Router>

并防止"/ 123"发射第一条路线？

我正在尝试为我的反应应用程序设置服务器端渲染,我正在尝试使用伟大的react-router模块来允许它处理非js情况(一些爬虫,当用户关闭某些js时原因).但是,我遇到了麻烦.我一直在使用/sf/answers/1999098181/这个很棒的回复作为指导,但是我发现了一些奇怪的错误.Syntax Error在尝试使用时我得到了持久性react.renderToString().我是否错误地设置了服务器端渲染,缺少明显的东西或其他什么？

我的设置:

真的很基本的Express服务器

require('babel/register');

var app = express();


// misc. express config...

var Router = require('react-router'),
    routes = require('../jsx/app').routes,
    React = require('react');


app.use(function(req, res, next) {
  var router = Router.create({location: req.url, routes: routes});
  router.run(function(Handler, state) {
    console.log(Handler);
    var html = React.renderToString(<Handler/>);
    return res.render('react_page', {html: html});
  });
});

顶级反应<App/>组件

// Shims
require('intl');
require('es5-shim');

var React = require('react/addons'),
  Router = require('react-router'),
  Nav = require('./nav'),
  injectTapEventPlugin = require("react-tap-event-plugin"),


  window.React = React; // …

到目前为止,我对属性如何通过参数从一个组件传递到另一个组件的知识程度如下

//开始:我的知识范围

假设存在一些名为的状态变量 topic在A.jsx中.我想把它传递给B.jsx,所以我执行以下操作

B = require('./B.jsx')
getInitialState: function() {return {topic: "Weather"}}
<B params = {this.state.topic}>

在B.jsx中,我可以做类似的事情

module.exports = React.createClass({
render: function() {
   return <div><h2>Today's topic is {this.props.params}!</h2></div>
}
})

在被召唤时将呈现"今天的主题是天气!"

//结束:我的知识范围

现在,我将通过以下代码片段阅读react-router教程

topic.jsx:

module.exports = React.createClass({
  render: function() {
    return <div><h2>I am a topic with ID {this.props.params.id}</h2></div>
    }
  })

routes.jsx:

var Topic = require('./components/topic');
module.exports = (
  <Router history={new HashHistory}>
    <Route path="/" component={Main}>
      <Route path = "topics/:id" component={Topic}></Route>
    </Route>

  </Router>
)

header.jsx:

  renderTopics: function() {
    return this.state.topics.map(function(topic) { …

我有2个需要共享状态的反应组件,react-router显示组件A,它接受一些输入并将其添加到其状态,在状态成功更新后,我想重定向到组件B,用户添加在向我的api提交post请求以保存来自组件A和B的数据之前,还有一些输入和更新与组件A相同的状态来构建具有来自A和B的输入的对象.如何实现这一点,是否有使用react-router的方法,还是我必须在组件之间建立父/子关系？