Root folder of my React application conflicts with React-Router

Question

My React application is hosted at www.mywebsite.com/myreact

When I defined my routes, I've done something like this:

<Router history={history}>
    <Route path="/" component={App} />
        <Route path="login" component={Login} />
    </Route>
</Router>

Although, it keeps complaining that /myreact is not defined in the route.

When I define it, that way:

<Route path="/myreact" component={App} />

and I try to access the URL www.mywebsite.com/myreact/login, the browser throw a 404 error.

But I can access www.mywebsite.com/myreact properly though.

What should I do?

Thanks.

did you try adding myreact to the login route as well? path="myreact/login" — PhilVarg
– PhilVarg, Commented Apr 29, 2016 at 21:07
try using browserHistory from react-router and your routes like path='/' & path='/login' — QoP
– QoP, Commented Apr 29, 2016 at 21:14

PhilVarg · Accepted Answer · 2016-04-29 21:21:29Z

2

You should be able to create a custom history object with a different basename for your apps 'root' url. with the useRouterHistory enhancement when creating the history object

https://github.com/reactjs/react-router/blob/master/docs/API.md#userouterhistorycreatehistory

some relavent comments in this github issue thread

import { createHistory } from 'history';
import { useRouterHistory } from 'react-router';

const browserHistory = useRouterHistory(createHistory)({
    basename: '/myreact'
});

your routes files should now work using browserHistory

<Router history={browserHistory}>
    <Route path="/" component={App} />
        <Route path="login" component={Login} />
    </Route>
</Router>

edited Apr 29, 2016 at 21:21

answered Apr 29, 2016 at 21:16

PhilVarg

4,8303 gold badges22 silver badges39 bronze badges

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

2 Comments

alexmngn Over a year ago

This work perfectly if I create a link to access the login page from the root page. Although if I try to access /myreact/login directly entering the URL, that's when I get the 404 error. Any suggestion?

PhilVarg Over a year ago

this is an inherent trait of the browserHistory type of history. if you go to any route manually before the router is attached, you must make a server route and allow your client-side js take over. github.com/reactjs/react-router/blob/master/docs/guides/…

Collectives™ on Stack Overflow

Root folder of my React application conflicts with React-Router

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related