FAQ Database Discussion Community


this.getParams() firing once Not updating the states on Routing

reactjs,react-router
I am using react-router. Where I pass the states in routing section . But router is updating the params only first time Here is fiddle link for code This is Table Class var Table = React.createClass({ mixins: [ Router.State ], getInitialState: function() { var table; var table_id = this.getParams().table_id; console.log(table_id);...

Skipping function keyword throws syntax error

javascript,reactjs,react-router
This example doesn't work: var App = React.createClass({ render() { return ( <div> Hello World </div> ) } }); I compile jsx into js on the client side and the browser throws the error, Uncaught SyntaxError: Unexpected token ( This example works: var App = React.createClass({ render: function() { return...

how to include reactr jsx files on the the fly instead of all in one go with the reactrouter?

reactjs,jsx,react-router
// This is straight from the overview.md in the react-router docs var Router = ReactRouter; var DefaultRoute = Router.DefaultRoute; var Link = Router.Link; var Route = Router.Route; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render: function () { return ( <div> <header> <ul> <li><Link to="inbox">Inbox</Link></li> <li><Link to="calendar">Calendar</Link></li> </ul> </header>...

React-Router open Link in new tab

reactjs,react-router
Is there a way to get React Router to open a link in new tab? I tried this and it did not work. <Link to="chart" target="_blank" query={{test: this.props.test}} >Test</Link> It's possible to fluff it by adding something like onClick="foo" to the Link like what I have above, but there would...

Module breaks when using a react component within a nested component

javascript,reactjs,react-router
I am trying to render a simple nested React component called Navbar but when I use another component (or a Link tag in this case) within it, the console gives me 'Uncaught Error: Cannot find module "../Navbar"'. If I remove the Link tag, the h1 tag is shown and there...

How to use HistoryLocation in react router?

reactjs,react-router
i am trying to use routes with history location because i dont want to use # inside my url's,i want to work with normal ones, i have been trying everything and every time i am getting the same error "Cannot GET /loginpro". i don't understand how the locations works, this...

React Router: TypeError: oldElement._store is undefined

reactjs,react-router
Trying to take an existing app and use React Router with the simplest HashLocation method to get started. Using: React 0.12.2 React Router 0.12.4 main.js (entry point): // Create App Container $('body').prepend('<div id="appContainer"></div>'); // Run the App Router.run(Routes, function (Handler) { React.render(React.createElement(Handler), document.getElementById('appContainer')); }); routes.jsx: var React = require('react'), Router...

React-router v0.13 in jsfiddles?

reactjs,react-router
I was trying to update a working jsfiddle with react-router 0.13.2, but it throws Uncaught ReferenceError: ReactRouter is not defined and other jsfiddles seem to do this as well. Does anyone know how to fix this?...

Type/Case Errors using in React-Router

reactjs,react-router
I was trying to move an app to React-Router and kept getting error. Then I tried a simple example inspired from the github repo and got the same errors. Probably a stupid error but I keep rereading the code but cannot find what is wrong with it. Errors: Warning: React.createElement:...

Create CRUD UI in reactjs with backend api

javascript,laravel,reactjs,react-router
Ive created a CRUD app in laravel, but now i want to improve the UI with react.js. Im still very new to react, so not sure how to go about doing this. So far i have created a table component that displays all the users with react. how should i...

React flux reset store value on route change

javascript,reactjs,reactjs-flux,flux,react-router
I have simple implementation of react and flux. i am creating new post with actions and stores but the problem that if the user going to another route and come back the this.postAdded still the same value. The store: class NewPostsStore { constructor() { this.title = ''; this.body = '';...

React +(Router) without webpack or browserify

reactjs,browserify,webpack,react-router
Is it possible to use react with ReactRouter, without using browserify or webpack. I am following the documentation from http://rackt.github.io/react-router they require react and react-router (require('react-router');). If I use browerifly my generated bundle is about 1MB filesize, which sounds like a lot. So is it possible to get reactrouter working...

React Router and RxJS data flow

javascript,reactjs,rxjs,react-router
I have a react App with the data flow being driven by RxJS -> here I subscribe to my data store with RxJS and pass it through the app as a prop: Model.subject.subscribe((appState) => { React.render( <App {...appState}/>, document.getElementById('app') ); }); bellow is how react-router normally renders it self: Router.run(routes,...

react-router go back a page how do you configure history?

javascript,reactjs,react-router
Can anyone please tell me how I can go back to previous page rather than a specific route? When using this code: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); Get this error, goBack()...

React-router: How can props be passed down to child components?

reactjs,react-router
I'm not sure if I'm approaching this in the right way at all, so a bit of background first: Let's say I have countries and cities in each country that I'm going to fetch from two stores, CountryStore and CityStore in the topmost route (view1). I'm trying to set up...

Accessing react-router from flummox action/store

reactjs,flux,react-router,flummox
I want to be able to make an API call in a Flummox action and transition differently depending on the response. I can pass the router into the action call but am looking for advice on a potentially better way. UPDATE: The correct answer is below but I wanted to...

Fork and Pull React-Router

javascript,npm,reactjs,react-router
I want to fork https://github.com/rackt/react-router to a private repo, update it, and then require it in my own project. If I run npm install react-router It doesn't just give me what's in the github repo (it runs some build scripts and packages it nicely). What's the best way to emulate...

Client Routing (using react-router) and Server-Side Routing

javascript,routing,routes,reactjs,react-router
I am thinking and confused with the routing between Client and Server. Support I use ReactJS for server-side rendering before sending the request back to web browser and use react-router as a client-side routing to switching between pages without refresh as SPA. What comes to me is: how the routes...

How to make React-Router to render an interactive output from the server?

javascript,node.js,express,reactjs,react-router
I'm trying to use react-router right now, with express.js. My final objective is: When a URL hits the server, it will use server-side rendering to render the output. Once in the client, future clicks on the Link component will cause react-router to render on the client (no need to do...

React Router and Arbitrary Query Params: Page Refreshes Unintentionally on Load?

javascript,reactjs,query-parameters,react-router
I've been using React Router with great success the past few weeks, but I just ran into an issue that I can't seem to find a resolution for. Whenever an arbitrary query parameter is appended to a url (in our case, for URL tracking purposes from email) the page that...

How do you get the params on a Route Handler with React Router

javascript,reactjs,react-router
I am trying to redirect a route to another route, and pass some params, like so: var UnAuthenticatedClass = React.creatClass({ statics: { willTransitionTo: function (transition) { if(!isLoggedIn()) { transition.redirect('signin', { originalTransition: transition }); } } ... My signin route: var SignIn = React.createClass({ componentDidMount: function() { console.log(this.getParams().originalTransition); // returns undefined...

webpack-dev-server react-router push state

reactjs,webpack,react-router
I am trying to get react-router to work with webpack-dev-server but keep getting cannot Get /SOMEURL. This is because webpack-dev-server is looking for that specific file but cannot find it. I'd like webpack to resort to using react-router vs searching for the files itself. How can I set that up?...

ECMA6 spread parameters in react-router

javascript,reactjs,ecmascript-6,react-router
I see a reactjs sample code written as, var App = React.createClass({ render: function () { return ( <div> <div className='content'> <RouteHandler {...this.state} /> </div> </div> ) } }) This is the part that confuses me. <RouteHandler {...this.state} /> In this, RouteHandler custom element uses .... And ECMA6 functions with...

Adding resolver to React-router

reactjs,react-router,refluxjs
In react-router, is there any way to pass a property from the Route-definition that can be picked up within the Router.run function? I want specific actions to fire for specific routes. Something like this perhaps: <Route handler={someComponent} resolve={someAction} /> In Router.Run i want to execute that given action defined in...

React page layout using react-router

javascript,reactjs,react-router
I have a default layout page here using react router: Header = require('./components/Header'), Footer = require('./components/Footer'), var sampleApp= React.createClass({ getDefaultProps() { return { title: 'Page One' }; }, render: function (){ return ( <div className="app"> <Header title={this.props.title} /> <RouteHandler /> <Footer /> </div> ); }, }); var routes = (...

react-router link to sub route

javascript,reactjs,react-router
How do I create a link for sub route like lang -> python ? My routes var routes = ( <Route name="app" path="/" handler={ App }> <Route name="info" handler={ Info } /> <Route name="home" handler={ Home } /> <Route name="lang" handler={ Lang } > <Route path="java" handler={Lang}/> <Route path="python" handler={Lang}/>...

What is var name = (param) => {} in JS [duplicate]

javascript,reactjs,react-router
This question already has an answer here: What's the meaning of “=>” in JavaScript? 5 answers I'm working with a React-Router test stubbing example, and I've never seen this class convention before. I'm guessing this is ES6 specific? var stubRouterContext = (Component, props, stubs) => { function RouterStub() {...

react-router always routes to 'NotFoundRoute'

reactjs,react-router
I've been in react for a few months. Love it. Just picked up react-router today. It seems awesome and straightforward, but my routes just aren't connecting. I'm building a single page app with a header that has three universal react components and a container for the main content. What's happening...

React with react-router: render component by replacing content in an element

reactjs,single-page-application,react-router
In my app, I am using React.js as my javascript framework, in combination with react-router for navigation. I have a problem in replacing the content of my main container div. When I access some new route, the appropriate route handler is activated calling the render method, but that html is...

Router is duplicating when clicking a element

javascript,reactjs,react-router
I am trying react router, and I've set up my routes: var routes = ( <Route name="app" handler={App}> <Route name="customers" path="api/customers" handler={UserBox}/> <Route name="login" path="login" handler={LoginBox}/> </Route> ); In a a navbar I have put : <ul className="nav navbar-nav"> <li><Link to="login">Login</Link></li> <li><Link to="customers">Customers</Link></li> </ul> On the surface everything seems to...

React routing and persistence on page refresh

javascript,reactjs,react-router,refluxjs
I am using React with react-router and Reflux as my datastore, but I am unsure on how to best deal with persistence to allow page refresh. My components connect to the store with Reflux.connect, but since the store fetches the data from a backend, it is not available yet when...

Pass props in Link react-router

javascript,reactjs,react-router
I am using react with react-router. I am trying to pass property’s in a "Link" of react-router var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render...

Getting query parameters from react-router hash fragment

javascript,reactjs,client-side,react-router,client-side-scripting
I'm using react and react-router for my application on the client side. I can't seem to figure out how to get the following query parameters from a url like: http://xmen.database/search#/?status=APPROVED&page=1&limit=20 My routes look like this (the path is totally wrong I know): var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route...

Nesting in Default Route

javascript,reactjs,react-router
I have an applications index page that lists all my applications. The index page is also the default route. I want to nest a 'applications new' modal in the index page. This way I can render the modal while on top of the index page. However, I'm not able to...

Why does webpack include a module in my first entry as well as my page bundle

reactjs,webpack,react-router
It seems like I'm having some sort of configuration issue with webpack and my react-router app. I'm trying to break up the bundle by pages, but I'm using react-router and I have a single "main" which does a router.run to route the app paths. It looks like when webpack runs...

React-Router: How to test href of a rendered Link?

javascript,reactjs,mocha,react-router
I have a React component that renders a <Link/>. render: function () { var record = this.props.record; return ( <Link to="record.detail" params={{id:record.id}}> <div>ID: {record.id}</div> <div>Name: {record.name}</div> <div>Status: {record.status}</div> </Link> ); } I can easily obtain the rendered <a/>, but I'm not sure how to test that the href was built...

react-router and flux - clearing state while transition

reactjs,reactjs-flux,flux,react-router
I am using react-router with the flux architecture (facebook's flux implementation). Currently in my system I have route that says "chat/:topic". When the user is entering this component, I am creating a subscription (using action creation, on componentWillMount) to a websocket server, and I am removing the subscription on componentWillUnmount....