React Head Method 404 - reactjs

I have a React app using react-router and I need to have a route that can respond to a HEAD request for a load balancer in AWS. I've created a route /healthcheck like so <Route path="/healthcheck" component={HealthCheck}/>. The component looks like the following
import React, {Component, PropTypes} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
class HealthCheck extends Component {
render() {
return (
<h1>Healthy</h1>
);
}
}
export default HealthCheck;
This returns a 200 for a GET but a 404 for HEAD. How can I make it return a 200 for a HEAD request?

This isn't how you should do this. React is a client side library that only handles the view. You should be using your server-side logic to handle this.

Related

How to extract an URL segment in React

I have inherited a project and are very new to React.
The problem is that I don't know how to extract an URL segment like 123456 from the URL page/123456.
Here is some code for I sidebar I want to use the URL segment in. I kept it short so it is as clear as possible where I want the URL segment.
import React, { Component } from 'react';
import { withRouter, Link } from 'react-router-dom';
import { compose } from 'redux';
import { connect } from 'react-redux';
import { push } from 'connected-react-router';
class Sidebar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div>
URL segment:
</div>
);
}
}
export default compose(withRouter))(Sidebar);
If you have a router configured properly then you might be able to find that value as a string in the this.props.match.params. You can take a look to the following example(please note that it's using react hooks and the main difference for you would be to use this.props.match.params instead of useParams()).
P.S. you should call withRouter instead of passing it to the compose method. E.g. withRouter(Sidebar) and if you want to use it with connect I guess you can just call one inside the other: connect(...)(withRouter(Sidebar))

React won't import my module "Module not found: Can't resolve "

React is not resolving my component import into my YouTubeApp.js.
It seems silly, i have other components in my react app that I'm able to import with no issues but this one in particular i can't get it imported.
Github: https://github.com/JAlonsoHdz/React_UnsplashClientApp/tree/master/src/components
Additional context, YouTubeApp.js is currently imported in my index.js with no issues. I'm using react routing imported in the index.js and links and the route links sucessfully to YouTubeApp.js. The problem arise whenver I try to import ANY component into YouTubeApp.js i get the Cannot resolve 'component name' error, without any imports the component YouTubeApp.js works fine.
I have validated the correct path, the name of the component.
YouTubeApp.js
import React from 'react';
import Other from './components/other';
class YouTubeApp extends React.Component {
render() {
return (<p>test</p>
);
}
}
export default YouTubeApp;
And this is my component I'm trying to import:
import React from 'react';
class Other extends React.Component {
render() {
return (
<div clasNames="ui container">test!</div>
);
}
}
export default Other;
I need to nest at least a few levels down more components but this issue blocking.
Looking at your GitHub repository, it appears that YouTubeApp.js and other.js are both in the "components" directory. Therefore when in YouTubeApp.js (or any other component in your "components" directory) your import should be:
import Other from './other';

Get backend instance from react-dnd

I'm attempting to use react-dnd and react-big-calendar with drag-n-drop support (using react-dnd under the hood as well) in an app together. However, if I initiate them separately, I get an error:
Uncaught Error: Cannot have two HTML5 backends at the same time.
Here's the code:
App.js
import React from 'react'
import {DragDropContext} from 'react-dnd'
import HTML5Backend from 'react-dnd-html5-backend'
import Calendar from './Calendar'
class App extends React.Component {
render() {
return {
<div>
...
<Calendar />
</div>
}
}
}
export default DragDropContext(HTML5Backend)(App)
Calendar.js
import React from 'react'
import BigCalendar from 'react-big-calendar'
import withDragAndDrop from 'react-big-calendar/lib/addons/dragAndDrop'
const Calendar = withDragAndDrop(BigCalendar)
...
react-big-calendar documentation mentions that the withDragAndDrop() function can accept a backend as a second argument, meaning, in theory, I should be able to retrieve the backend instance that I have already set for react-dnd and pass it as an argument. However, I'm not sure how I retrieve the backend instance.
react-dnd documentation for DragDropContext mentions an instance method getManager() which should help me retrieve the backend (getManager().getBackend()). However, the key here is instance method. How do I get the instance of DragDropContext(HTML5Backend)(App) from my Calendar.js file?

import connected and disconnected components React, Redux

I'm new to React and Redux I'm trying to write some tests using enzyme, I was wondering if there is a way to import components as connected and disconnected components to test for both shallow rendering and full dom rendering. Here is what I mean;
import ConnectedApp, { App } from '../App';
is there a way to do this if not why?
Thank you
Straight from Redux documentation about testing connected components:
In order to be able to test the App component itself without having to
deal with the decorator, we recommend you to also export the
undecorated component:
import { connect } from 'react-redux'
 
// Use named export for unconnected component (for tests)
export class App extends Component { /* ... */ }
 
// Use default export for the connected component (for app)
export default connect(mapStateToProps)(App)
Then you do just as you expected:
import ConnectedApp, { App } from '../App';

react-apollo getClient is undefined

There appears to be an error with how I'm using react-apollo. Following the docs, I am attempting to make a basic query with Apollo. This is the error I get in the browser when on the Review page. It appears that this.getClient is undefined and unable to call watchQuery.
react-apollo.browser.umd.js:417 Uncaught TypeError: this.getClient(...).watchQuery is not a function
at GraphQL.createQuery (react-apollo.browser.umd.js:417)
at GraphQL.setInitialProps (react-apollo.browser.umd.js:404)
at GraphQL.componentWillMount (react-apollo.browser.umd.js:260)
etc...
Here is the code for the Review page. I create a Review React Component, declare a graphql-tag that calls the userInfo query, and export the graphql tag connected to the Review page below.
import React from 'react'
import { graphql } from 'react-apollo';
import gql from 'graphql-tag'
class Review extends React.Component {...}
const userInfoQuery = gql`
query userInfoQuery{
userInfo {
_id
email
name {
first
last
}
isVerified
}
}`
const ReviewWithData = graphql(userInfoQuery)(Review)
export default ReviewWithData;
The issue was I was defining the wrong client in the root index.js file. So for the code below, the client I was exporting was not actually the correct Apollo client. So the variable client on the sixth import was importing some other functions. Lesson learned! Should have been more careful!
import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { ApolloProvider } from 'react-apollo';
import App from './containers/app';
import client from './services/Apollo'
const CustomerFrontendApp = (
<ApolloProvider client={BitsyApollo.client}>
<BrowserRouter>
<App />
</BrowserRouter>
</ApolloProvider>
);
render(BitsyCustomerFrontendApp, document.getElementById('root'));

Resources