FAQ Database Discussion Community


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...

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...

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...

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...

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 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....

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...

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...

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,...

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...

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:...

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...

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...

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 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}/>...

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...

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...

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...

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...

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?...

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 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) 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...

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...

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?...

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...

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...

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...

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...

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...

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...

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: 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...

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...

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...