How to handle React Router with Node Express routing

Question

I am trying to manage a react app with react router and node js server

my router in react:

<BrowserRouter>
    <Switch>
        <PrivateRoute token={token} Component={Payments} exact path="/payments"/>
        <PrivateRoute token={token} Component={User} exact path="/user"/>
        <PrivateRoute token={token} Component={User} exact path=""/>
        <PrivateRoute token={token} Component={User} exact path="/"/>
    </Switch>
<BrowserRouter/>

export const PrivateRoute = ({Component, ...rest,token}) => {
    return (
        <Route {...rest} render={props => token ? (<Component {...props}/>) :
            (<Redirect to={{pathname: '/login', state: {from: props.location}}}/>)
        }/>
    )
};

and my router in my NodeJS Server :

const app = express();
const server = new Server(app);
const port = process.env.PORT || 5000;

app.use('/api', router);
app.use(express.static(path.join(__dirname, '/../react_dist')));
app.use('*',  (req, res) => {
    res.sendFile(path.join(__dirname, '/../react_dist', 'index.html'));
});
server.listen(port,() => {
    console.log('Server Is up : ', port)
});

when trying to access localhost:5000/user react app is working fine but when I want to access localhost:5000/api its redirected to the react app again cannot figure out how to fix it what do I need to change? thanks

try changing app.use('*', (req, res)=> { to app.use('/', (req, res)=> { — Velimir Tchatchevsky
– Velimir Tchatchevsky, Commented Sep 14, 2018 at 15:05
the problem is inside that switch of react router. you haven't defined the path for /api - which implies if you dont have token and your are trying to access some url it will revert back to react app — karthik
– karthik, Commented Sep 14, 2018 at 15:08
@karthik so how to handle route in side react router to node js ? <Route path="/api"/> — Eran Abir
– Eran Abir, Commented Sep 14, 2018 at 15:45

Matt Carlotta · Accepted Answer · 2018-09-15 01:31:10Z

15

You need to define Express routes and controllers to match the front-end request.

This is most likely invalid/not configured properly: app.use('/api',router);

Impossible to know for sure unless you paste what your router file looks like.

Try replacing it with the matching front-end request:

app.delete('/api', callbackfunction)
app.get('/api', callbackfunction)
app.put('/api', callbackfunction)
app.post('/api', callbackfunction)

Express needs a request (app.[request]), a route ('/api'), and a controller function (callback function).

app.get('/api', (req, res, done) => res.status(201).json({ message: "Hello World!" }));

app.use(express.static('client/build'));

app.get('*', (req, res) => res.sendFile(path.resolve('client', 'build', 'index.html')));

app.listen(5000);

edited Sep 15, 2018 at 1:31

answered Sep 14, 2018 at 17:18

Matt Carlotta

19.8k5 gold badges42 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eran Abir · Accepted Answer · 2018-09-15 07:47:53Z

7

Solved !

because i created the react app with create-react-app cli i needed to add to package.json file this line :

"proxy": "http://localhost:5000"

and now when i am trying to make a GET request like that :

axios.get('/api/someurl') is working as expected

thank you all

answered Sep 15, 2018 at 7:47

Eran Abir

1,0975 gold badges20 silver badges35 bronze badges

1 Comment

titoih Over a year ago

i am having similar problem. My backend wirth build front in same directory, is requesting wrong routes. DO you know what's the problem?

jxzheng16 · Accepted Answer · 2018-09-15 03:42:58Z

3

What does your express route look like? Like the above user said, it really depends on what your router file looks like on the line

app.use('/api', router);

There is no need to define your API routes in react-router. However, I think you're misunderstanding how they work together. Usually react-router is used for client side routing while express handles your backend routes such as fetching data. You use react router to route users to different pages and views while your express routes would just render data.

answered Sep 15, 2018 at 3:42

jxzheng16

911 silver badge3 bronze badges

Comments

Eran Abir · Accepted Answer · 2018-09-15 06:53:29Z

0

my router :

const router = express.Router({});
router.get('/someurl',(res,req)=>{
       res.status(201).json({ message: "Hello World!" })
});

answered Sep 15, 2018 at 6:53

Eran Abir

1,0975 gold badges20 silver badges35 bronze badges

Collectives™ on Stack Overflow

How to handle React Router with Node Express routing

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related