CODEWITHSUNDEEP
reactjsreact-routerhistory.js
Jarrod Medrano
Jarrod Medrano

Reputation: 98

How do I get React Router basename to work

I am trying to get my react app to work on the file system in IE Edge browser. So far I have gotten this far.

import { createHistory, useBasename } from 'history'
let appHistory = useBasename(createHistory)({
    basename: '/build'
});
<Router history={appHistory}>
<Route path={window.location.pathname} component={App}>

And this way I can actually see a page render, but the routes do not work I also get this path in the Edge browser file:///C:/C:/ ... etc. Why does it have two C:/'s?

In chrome I get this error

Uncaught DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'file:///C:/build/windows' cannot be created in a document with origin 'null' and URL 'file:///C:/src/myproject/build/index.html'.

Upvotes: 1

Views: 3047

Answers (1)

Kanan Farzali
Kanan Farzali

Reputation: 1063

You should use useRouterHistory instead of useBaseName:

import { Router, Route, useRouterHistory } from 'react-router'
import createBrowserHistory from 'history/lib/createBrowserHistory'

const history = useRouterHistory(createBrowserHistory)({
    basename: '/dist'
});

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

Upvotes: 2

Related Questions