We Keep Coding

Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName})

When i enter my React Router-dom i point my routes to a validation page.
In event aim loged in or not, i push my route(history) to required page but i keep getting bellow error.
Error: Objects are not valid as a React child (found: object with keys {$$typeof, type, compare, WrappedComponent, displayName}). If you meant to render a collection of children, use an array instead.
in Unknown (at RequiredAuth.js:34)
in RequireAuth (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at App.js:23)
in Switch (at App.js:18)
in Router (at App.js:17)
in div (at App.js:16)
in App (created by ConnectFunction)
in ConnectFunction (at Dashbord.js:14)
in div (at Dashbord.js:14)
in DashBoard (created by ConnectFunction)
in ConnectFunction (at src/index.js:10)
in Provider (at src/index.js:9)
App.js
import React from 'react';
import { Router, Route, Redirect, Switch } from 'react-router-dom';
import { history } from './configureStore';
import { allRoutes } from './routes';
import NotFound from './pages/404';
import RequiredAuth from './components/RequiredAuth';
import NotRequiredAuth from './components/NotRequiredAuth';
import DashBoard from './pages/Dashbord';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
class App extends React.Component {
render() {
return (
<div style={{ height: '100%' }}>
<Router history={history}>
<Switch>
{allRoutes
.filter(route => route.visible)
.map((route, index) => {
return (
<Route
exact={route.exact}
path={route.path}
key={index}
component={RequiredAuth(route.component)}
/>
)
})}
<Route path={'/:404_path'} key={'404'} component={NotFound} />
<Redirect to="/dashboard" />
</Switch>
</Router>
</div>
);
}
}
App.displayName = 'App';
const mapDispatchToProps = dispatch => {
return bindActionCreators({ }, dispatch);
};
const mapStateToProps = state => {
return {
};
};
export default DashBoard(
connect(
mapStateToProps,
mapDispatchToProps
)(App)
);
RequiredAuth.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import { history } from '../configureStore';
export default function (ComposedComponent) {
class Authentication extends Component {
constructor(props){
super(props);
this.props = props;
}
componentDidMount() {
const { auth } = this.props
if (!auth.success) {
history.push('/login');
}
}
componentDidUpdate() {
const { auth } = this.props
if (!auth.success) {
history.push('/login');
}
}
PropTypes = {
router: PropTypes.object
}
render() {
return <ComposedComponent {...this.props} />;
}
}
Authentication.propTypes = {
location: PropTypes.object
}
Authentication.displayName = 'RequireAuth'
function mapStateToProps(state) {
return { auth: state.auth };
}
const mapDispatchToProps = dispatch => bindActionCreators({ }, dispatch);
return connect(mapStateToProps, mapDispatchToProps)(Authentication);
}
Dashbord.js
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { ShouldRender } from '../components/basic/ShouldRender';
export default function(ComposedComponent) {
class DashBoard extends Component {
render() {
const {auth} = this.props
if (!auth.success) return <div>{ComposedComponent && <ComposedComponent />}</div>;
return (
<div>
<ShouldRender if={!auth.success}>
{ComposedComponent && <ComposedComponent />}
</ShouldRender>
<ShouldRender if={auth.success}>
<div style={{ height: '100%' }}>
<div>
<div className='page-container'>
<main className='main-content bgc-grey-100'>
<div id='mainContent'>
<div className='row gap-20 masonry pos-r'>
<div className='masonry-item col-12'>
{ComposedComponent && <ComposedComponent />}
</div>
</div>
</div>
</main>
<footer className='bdT ta-c p-30 lh-0 fsz-sm c-grey-600'>
<span>
Copyright © {new Date().getFullYear()}{' '}
<a
href='https://dataintegrated.co.ke'
target='_blank'
title='Data Integrated'
>
Data Integrated Limited
</a>
. All rights reserved.
</span>
</footer>
</div>
</div>
</div>
</ShouldRender>
</div>
);
}
}
const mapDispatchToProps = (dispatch) => {
return bindActionCreators({ }, dispatch);
};
function mapStateToProps(state) {
return {
auth: state.auth
};
}
DashBoard.propTypes = {
};
return connect(mapStateToProps, mapDispatchToProps)(DashBoard);
}
Have tried working with HOC react official page but when i implement this validation, i always land my self on this error, but when i remove HOC implementation everything renders perfectly.

try using a return statement in your HOC or change your function into an arrow function
I.E
export default function(ComposedComponent) {
return class DashBoard extends Component
OR
export default (ComposedComponent) =>{
class DashBoard extends Component

I found several errors in your code, first of all your function definition is wrong, at export default function(ComposedComponent) it must be export default function ComposedComponent () {} Do not put this class class Authentication extends Component {} inside the function, if you want it to be a component create another function for this. Also define which type of components you are going to use: Functional or Class based.
We cannot know how to help you while your code have these several mistakes. Please check them and back again with your updated code.

history or context .push() not working because of blank object [duplicate]

I have a Dashboard with rotating slides, each of which has a corresponding tab in Bldgs. Both Dashboard.js and Bldgs.js are children to my App.js.
When a user clicks on a specific slide A in Dashboard.js, Dashboard needs to tell App.js so that App can tell Bldgs.js to have tab A displayed when it routes to Bldgs.
I believe that I am passing the correct index value from Dashboard up to App and down to Bldgs. However, an error is being thrown in my App.js file stating:
Uncaught TypeError: Cannot read property 'push' of undefined
My code was working fine before I started passing my handleClick() function to my Dashboard component.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter as Router } from 'react-router-dom';
import { hashHistory } from 'react-router';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(
<MuiThemeProvider>
<Router history={hashHistory}>
<App />
</Router>
</MuiThemeProvider>,
document.getElementById('root')
);
App.js
import React from 'react';
import { Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default App;
Dashboard.js
import React, { Component } from 'react';
import './Dashboard.css';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
...
var curIndex;
class Dashboard extends Component {
constructor(props) {
super(props);
this.handleEnter = this.handleEnter.bind(this);
this.handleChange = this.handleChange.bind(this);
curIndex = 0;
}
handleEnter(e) {
// console.log(curIndex);
this.props.handleClick(curIndex);
}
handleChange(value) {
// console.log(value);
curIndex = value;
}
...
}
export default Dashboard;
Bldgs.js
...
var curTab;
class Bldgs extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.goHome = this.goHome.bind(this);
curTab = 0;
}
handleChange(value) {
this.setState({'selectedTab': value});
console.log(this.state);
}
goHome(e) {
this.props.history.push('/');
}
...
}
export default Bldgs;

In order to make use of history in the App component use it with withRouter. You need to make use of withRouter only when your component is not receiving the Router props,
This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.
import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default withRouter(App);
Documentation on withRouter

for React-router V4
change the function to
onClick={this.fun.bind(this)}
fun() {
this.props.history.push("/Home");
}
and
import { withRouter } from 'react-router-dom';
export it later as:
export default withRouter (comp_name);

When working with functional components we can use useHistory() to history to push method
import { useHistory } from "react-router-dom";
and then in function we have to assign the useHistory()
let history = useHistory();
Now We can use history.push to relocate to desired page
history.push('/asdfg')

You are trying to push with out giving the task to a valid library. on App.js
So:
on App.js
You are using BrowserRouter which is handling the history of pages by default, with this react-router-dom function you are relying on BrowserRouter to do this fore you.
Use Router instead of BrowserRouter to gain control of you're history, use history to control the behavior.
Use npm history "yarn add history#4.x.x" / "npm i history#4.x.x"
import Route from 'react-router-dom'; //don't use BrowserRouter
import createBrowserHistory from 'createBrowserHistory';
Remember to exoport it !!
export const history = createBrowserHistory();
4.import history to Dashboard.js
5.import history to Bldgs.js
hope this helps !!!
#brunomiyamotto

See my App.js file below. I ended up passing {...this.props} to the NavBar Component that I had created.
The NavBar component is not part of my Switch routes.
import React, { Component } from 'react';
import { Route, Link, Redirect, Switch, withRouter } from 'react-router-dom'
import Navbar from './Navbar.js';
import Home from './Home/HomeCont';
import Login from './Register/Login';
import Dashboard from './Dashboard/DashboardCont';
import './App.css';
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="App">
<header className="App-header">
//SOLUTION!!!
<Navbar {...this.props}/>
</header>
<Switch>
<React.Fragment>
<Route exact path="/" render={(props) => <Home {...props}/>}/>
<Route exact path="/login" render={(props) => <Login {...props}/>}/>
</React.Fragment>
</Switch>
</div>
);
}
}
export default withRouter(App);
Within my Navbar. The button I used had the following code. I had to .bind(this) to see the history and be able to user this.props.history.push("/")
<Button
color="inherit"
onClick={this.handleLogout.bind(this)}>Logout</Button>

My mistake was the wrong import in conjuction with BrowserRouter, ie:
incorrect:
import { useHistory } from 'react-router'
correct:
import { useHistory } from 'react-router-dom'

I solved this error by wrapping the component inside the BrowserRouter.
Don't forget about this, it's a very common mistake.
import { BrowserRouter} from 'react-router-dom';
<BrowserRouter>
<Menu/>
<BrowserRouter>
Only the router childrens receive the history hook.

react router - unable to pass store down

I am unable to make the store available to children components.
The setup is a SPA with Symfony as back-end, though this should not make a difference for this matter.
The entry point for Webpack is the file:
/client/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore, applyMiddleware, compose } from 'redux';
import ReduxPromise from 'redux-promise';
import Root from './App';
import registerServiceWorker from './registerServiceWorker';
import reducers from './pages/combine_reducers';
let composeEnhancers = typeof(window) !== 'undefined' && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const store = createStore(
reducers,
composeEnhancers(
applyMiddleware(ReduxPromise)
)
)
ReactDOM.render(
<Root store={store} />
, document.querySelector('#root')
);
registerServiceWorker();
The apps as such is at:
/client/App.js
import React from 'react';
import PropTypes from 'prop-types';
import { Provider } from 'react-redux';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
import HomePage from './pages/home/';
import AccountPage from './pages/account/';
const Root = ({ store }) => {
return(
<Provider store={store}>
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<Router>
<div>
<Link to="/account">Account</Link>
<Link to="/">Home</Link>
<div>
<Switch>
<Route path="/account" component={AccountPage} />
<Route path="/" component={HomePage} />
</Switch>
</div>
</div>
</Router>
</div>
</Provider>
)
}
Root.propTypes = {
store: PropTypes.object.isRequired
}
export default Root;
So far so good. The store is available in App.js.
But that's not the case at the next level. As you can see I'm attempting to make the store available using connect().
/client/pages/home/index.js
import React from 'react';
import { connect } from 'react-redux';
import Register from '../common/register/';
import PropTypes from 'prop-types';
class Home extends React.Component {
constructor(props){
super(props)
console.log(props);
}
render() {
return (
<div>
<h1> Hello World from home! </h1>
<Register />
</div>
);
}
}
Home.propTypes = {
store: PropTypes.object.isRequired
}
const mapStateToProps = (state) => {
return {
store: state.store,
}
}
export default connect(mapStateToProps)(Home)
At the lower level, the Register component, I'm able to submit the form, but the store not being available, I am unable to capture the response coming from the server.
/client/pages/common/register/index.js
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import RegisterForm from './containers/register';
import { actionSubmitRegister } from './actions/';
import PropTypes from 'prop-types';
class Register extends React.Component{
constructor (props) {
super(props);
this.state = {
registerResponse: '',
}
this.onSubmitRegister = this.onSubmitRegister.bind(this);
}
onSubmitRegister (event) {
event.preventDefault();
let submitForm = new Promise((resolve, reject) => {
actionSubmitRegister(this.props.form.RegisterForm.values);
});
submitForm.then((response) => {
console.log('response',response);
this.setState({registerResponse: this.props.submit_register.data});
console.log('registerResponse', this.state.registerResponse);
}).catch((error) => {
console.log(error);
});
}
render(){
return (
<div>
<div>
<RegisterForm
submitRegister={this.onSubmitRegister}
/>
<h3>{this.state.registerResponse}</h3>
</div>
</div>
)
}
}
/*
Register.propTypes = {
store: PropTypes.object.isRequired
}
*/
const mapStateToProps = (state) => {
return {
form: state.form,
submit_register: state.submit_register,
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({actionSubmitRegister}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);

In mapStateToProps you map store: state.store but in general you use this method to map single props from your state to props in your component, not map the entire store (if this is even possible).
Eg:
form: state.form

The reason you are not able to access the store object in props is because you are not passing it down via props.
Provider from the react-redux library, makes it available to all children down the element tree. Store is made available via React's context API, NOT via props.
"Context is designed to share data that can be considered “global” for a tree of React components."
So in a child component of Provider, we can now do something like
render() {
const { store } = this.context;
console.log(store)
return(
...
)
}
This is the same way that react-redux's connect HOC is able to access the store and subsequently mapStateToProps or utilise the store's dispatch method to mapDispatchToProps.
Also I think Provider requires that it’s child element is a React component.
Check out this tutorial for a more in-depth explanation.

After the input I received above, I reviewed my code and got it to work.
Actually the main issue was on the /client/pages/common/register/index.js file, but I am posting the whole chain for reference:
/client/index.js
nothing to change
/client/App.js
The references to propTypes do not seem to be necessary, so I took them out.
import React from 'react';
import { Provider } from 'react-redux';
import {
BrowserRouter as Router,
Route,
Link,
Switch
} from 'react-router-dom';
import HomePage from './pages/home/';
import AccountPage from './pages/account/';
const Root = ({ store }) => {
return(
<Provider store={store}>
<div className="App">
<header className="App-header">
<h1 className="App-title">Welcome to React</h1>
</header>
<Router>
<div>
<Link to="/account">Account</Link>
<Link to="/">Home</Link>
<div>
<Switch>
<Route path="/account" component={AccountPage} />
<Route path="/" component={HomePage} />
</Switch>
</div>
</div>
</Router>
</div>
</Provider>
)
}
export default Root;
/client/pages/home/index.js
Here both propTypes and connect() do not seem to be required.
import React from 'react';
import Register from '../common/register/';
class Home extends React.Component {
constructor(props){
super(props)
}
render() {
return (
<div>
<h1> Hello World from home! </h1>
<Register />
</div>
);
}
}
export default Home;
/client/pages/common/register/index.js
The main issue here was the onSubmitRegister() method. The promise was not properly setup and I was referencing the action directly instead of using this.props. React do not seem to like that.
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import RegisterForm from './containers/register';
import { actionSubmitRegister } from './actions/';
class Register extends React.Component{
constructor (props) {
super(props);
this.state = {
registerResponse: '',
}
this.onSubmitRegister = this.onSubmitRegister.bind(this);
}
onSubmitRegister (event) {
event.preventDefault();
let submitForm = new Promise((resolve) => {
resolve(this.props.actionSubmitRegister(this.props.form.RegisterForm.values));
});
submitForm.then((result) => {
let data = result.payload.data;
this.setState({registerResponse: data.message});
}).catch((error) => {
console.log(error);
});
}
render(){
return (
<div>
<div>
<RegisterForm
submitRegister={this.onSubmitRegister}
/>
<h3>{this.state.registerResponse}</h3>
</div>
</div>
)
}
}
const mapStateToProps = (state) => {
return {
form: state.form,
submit_register: state.submit_register,
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({actionSubmitRegister}, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Register);

How to solve the error 'Warning: React.createElement: type should not be null, undefined in React?

I am new to reactjs and trying to implement a reactjs application by following tutorials in Fullstack.io. When I got to the middle of this tutorial, I received the error while running npm run test.
app.js:
import React from 'react'
import ReactDOM from 'react-dom'
import 'font-awesome/css/font-awesome.css'
import App from 'containers/App/App'
import './app.css'
import {browserHistory, Router, Route} from 'react-router'
const Home = React.createClass({
render: function() {
return (<div>Hello world</div>)
}
})
const routes = (
<Router>
<Route path="/" component={Home} />
</Router>
)
const mountNode = document.querySelector('#root');
ReactDOM.render(
<App history={browserHistory} />, mountNode);
App.js
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom'
import { Router } from 'react-router';
class App extends React.Component {
static propTypes = {
routes: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
get content() {
return (
<Router routes={this.props.routes} history={this.props.history} />
)
}
render() {
return (
<div style={ { height: '100%' } }> {this.content} </div>
)
}
}
export default App;
I couldn't find out where the error is, can anyone help me solve the issue?
The screenshot of error is given below:

You are not exporting your App component.
Change it to
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom'
import { Router } from 'react-router';
export default class App extends React.Component {
static propTypes = {
routes: PropTypes.object.isRequired,
history: PropTypes.object.isRequired
}
get content() {
return (
<Router routes={this.props.routes} history={this.props.history} />
)
}
render() {
return (
<div style={ { height: '100%' } }> {this.content} </div>
)
}
}
Notice the export keyword.

react-router children not propagating

I am trying to use react-router but I am not able to propagate children components.
index.js
import 'babel-polyfill';
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
import Login from './containers/Login';
const rootElement = document.getElementById('app');
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="login" component={Login}/>
</Route>
</Router>
), rootElement);
App.js
import React, { Component, PropTypes } from 'react';
import { Login } from './containers';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
const { children } = this.props;
return (
<div className="content">
{children}
</div>
);
}
}
App.propTypes = {
children: PropTypes.any,
};
LoginPage.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Login } from '../components';
export default class LoginPage extends Component {
constructor(props, context) {
super(props, context);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
const { handleSubmit, redirect } = this.props;
return (
<Login handleSubmit={handleSubmit}
redirect={redirect}
/>
);
}
}
LoginComponent.js
import React, { Component, PropTypes } from 'react';
export default class Login extends Component {
constructor(props, context) {
super(props, context);
this.state = {
email: '',
password: '',
};
}
handleChange(field, event) {
const nextState = this.state;
nextState[field] = event.target.value;
this.setState(nextState);
}
handleSubmit(event) {
event.preventDefault();
this.props.handleSubmit(this.state);
}
render() {
return (
<form onSubmit={event => this.handleSubmit(event)}>
<input
type="text" placeholder="Email"
value={this.state.email}
onChange={this.handleChange.bind(this, 'email')}
/>
<input
type="password" placeholder="Password"
value={this.state.password}
onChange={this.handleChange.bind(this, 'password')}
/>
<input type="submit" value="Submit"/>
</form>
);
}
}
Login.propTypes = {
handleSubmit: PropTypes.func.isRequired,
};
If I just import LoginPage directly into App.js where I try to render {children} it works perfectly fine. On inspection it simply says children is undefined
react#0.14.6
react-dom#0.14.6
react-router#2.0.0-rc5
As a side note, I ran npm list react-router and I got this back
`-- (empty)
npm ERR! code 1
Any help would be great!!
Edit: I edited the first code snippet to be import Login from './containers/Login'; from import { Login } from './containers/Login';
That was a type from simplifying the problem. I had it the other way originally because I am actually using an index.js for containers and was calling import { Login } from './containers';
I have stepped through the code and it shows that Login is NOT undefined in index.js but children is when I get to App.js
Below is a screenshot of a breakpoint in index.js and App.js in the same run. index.js shows Login as being initialized but then children is undefined.
[
Okay I have simplified the whole thing as much as possible now into a single file and it still doesn't work
import 'babel-polyfill';
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
class App extends Component {
constructor(props) {
super(props);
}
render() {
const { children } = this.props;
return (
<div className="content">
{children}
</div>
);
}
}
class Child extends Component {
render() {
return (
<p>I am a child</p>
);
}
}
const rootElement = document.getElementById('app');
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="login" component={Child}/>
</Route>
</Router>
), rootElement);
I then ran it and got the following
Then I added <Child /> directly into the render property of App and got this
So this is not a problem with how I am importing files etc.

The solution is quite simple. Replace
import { Login } from './containers/Login';
with
import Login from './containers/Login';
in your index.js
The reason why your child property was always 'undefined' is because the passed over component was 'undefined':
If you have questions regarding the import syntax i can recommend this SO Question "using brackets with javascript import syntax"
See full code:
index.js
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, browserHistory } from 'react-router';
import App from './App';
import Login from './containers/LoginPage';
const rootElement = document.getElementById('app');
render((
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="login" component={Login}/>
</Route>
</Router>
), rootElement);
App.js
import React, { Component, PropTypes } from 'react';
export default class App extends Component {
constructor(props) {
super(props);
}
render() {
const { children } = this.props;
return (
<div className="content">
{children}
</div>
);
}
}
App.propTypes = {
children: PropTypes.any,
};
./containers/LoginPage.js
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import Login from '../components/Login';
export default class LoginPage extends Component {
constructor(props, context) {
super(props, context);
}
handleSubmit(event) {
event.preventDefault();
}
render() {
const { handleSubmit, redirect } = this.props;
return (
<Login handleSubmit={handleSubmit}
redirect={redirect}
/>
);
}
}
./components/Login.js
import React, { Component, PropTypes } from 'react';
export default class Login extends Component {
constructor(props, context) {
super(props, context);
this.state = {
email: '',
password: '',
};
}
handleChange(field, event) {
const nextState = this.state;
nextState[field] = event.target.value;
this.setState(nextState);
}
handleSubmit(event) {
event.preventDefault();
this.props.handleSubmit(this.state);
}
render() {
return (
<form onSubmit={event => this.handleSubmit(event)}>
<input
type="text" placeholder="Email"
value={this.state.email}
onChange={this.handleChange.bind(this, 'email')}
/>
<input
type="password" placeholder="Password"
value={this.state.password}
onChange={this.handleChange.bind(this, 'password')}
/>
<input type="submit" value="Submit"/>
</form>
);
}
}
Login.propTypes = {
handleSubmit: PropTypes.func.isRequired,
};
Proof with react 0.14.6 and react-router 2.0.0-rc5

Ok so answering my own question. Basically a really stupid mistake but maybe someone will benefit. I was using localhost/#/child because I thought this is what it was supposed to say and localhost/child hits an registered route on my server. So the fix was to make my server-side route handler
router.get('/*', (req, res) => {
res.render(view);
});
And then navigate to localhost/child