history object with central Routes file
I have seen many examples over the net on how to use history object with React Router. However, I havent stumbled upon a case where the example shows a central routes file as shown below:
routes.js
const RouteList = () => (
<main>
<Switch>
<Route path="/" exact component=HomePage />
<Route component=Error />
</Switch>
</main>
);
export default RouteList;
App.js
render()
return (
<div>
<Header />
<RouteList />
<Footer />
</div>
);
history.js
import createBrowserHistory from 'history';
export default createBrowserHistory();
Can someone shed some light how i can use history with my centralized routes? Or if there is another similar thread please let me know thank you so much.
reactjs react-router-v4 history.js
asked Nov 13 '18 at 7:06
AKJAKJ
7610
add a comment |
I have seen many examples over the net on how to use history object with React Router. However, I havent stumbled upon a case where the example shows a central routes file as shown below:
routes.js
const RouteList = () => (
<main>
<Switch>
<Route path="/" exact component=HomePage />
<Route component=Error />
</Switch>
</main>
);
export default RouteList;
App.js
render()
return (
<div>
<Header />
<RouteList />
<Footer />
</div>
);
history.js
import createBrowserHistory from 'history';
export default createBrowserHistory();
Can someone shed some light how i can use history with my centralized routes? Or if there is another similar thread please let me know thank you so much.
reactjs react-router-v4 history.js
asked Nov 13 '18 at 7:06
AKJAKJ
7610
add a comment |
I have seen many examples over the net on how to use history object with React Router. However, I havent stumbled upon a case where the example shows a central routes file as shown below:
routes.js
const RouteList = () => (
<main>
<Switch>
<Route path="/" exact component=HomePage />
<Route component=Error />
</Switch>
</main>
);
export default RouteList;
App.js
render()
return (
<div>
<Header />
<RouteList />
<Footer />
</div>
);
history.js
import createBrowserHistory from 'history';
export default createBrowserHistory();
Can someone shed some light how i can use history with my centralized routes? Or if there is another similar thread please let me know thank you so much.
reactjs react-router-v4 history.js
asked Nov 13 '18 at 7:06
AKJAKJ
7610
I have seen many examples over the net on how to use history object with React Router. However, I havent stumbled upon a case where the example shows a central routes file as shown below:
routes.js
const RouteList = () => (
<main>
<Switch>
<Route path="/" exact component=HomePage />
<Route component=Error />
</Switch>
</main>
);
export default RouteList;
App.js
render()
return (
<div>
<Header />
<RouteList />
<Footer />
</div>
);
history.js
import createBrowserHistory from 'history';
export default createBrowserHistory();
Can someone shed some light how i can use history with my centralized routes? Or if there is another similar thread please let me know thank you so much.
reactjs react-router-v4 history.js
reactjs react-router-v4 history.js
asked Nov 13 '18 at 7:06
AKJAKJ
7610
asked Nov 13 '18 at 7:06
AKJAKJ
7610
asked Nov 13 '18 at 7:06
AKJAKJ
7610
asked Nov 13 '18 at 7:06
AKJAKJ
7610
asked Nov 13 '18 at 7:06
AKJAKJ
7610
7610
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The custom history object need to be provided as a prop to the Router Provider component. In your case you can Specify a Router Provider in App.js or RouteList depending on whether Header and Footer also need Router props or not.
import browserHistory from './history.js';
...
render()
return (
<Router history=browserHistory>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
Also in your history.js file, import createBrowserHistory like
import createBrowserHistory from 'history/createBrowserHistory';
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
I tried that, it caused my entire application to not render and this error is thrown:Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function
– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export inhistory/createBrowserHistory
– Shubham Khatri
Nov 13 '18 at 7:32
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275585%2fhistory-object-with-central-routes-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The custom history object need to be provided as a prop to the Router Provider component. In your case you can Specify a Router Provider in App.js or RouteList depending on whether Header and Footer also need Router props or not.
import browserHistory from './history.js';
...
render()
return (
<Router history=browserHistory>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
Also in your history.js file, import createBrowserHistory like
import createBrowserHistory from 'history/createBrowserHistory';
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
I tried that, it caused my entire application to not render and this error is thrown:Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function
– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export inhistory/createBrowserHistory
– Shubham Khatri
Nov 13 '18 at 7:32
add a comment |
The custom history object need to be provided as a prop to the Router Provider component. In your case you can Specify a Router Provider in App.js or RouteList depending on whether Header and Footer also need Router props or not.
import browserHistory from './history.js';
...
render()
return (
<Router history=browserHistory>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
Also in your history.js file, import createBrowserHistory like
import createBrowserHistory from 'history/createBrowserHistory';
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
I tried that, it caused my entire application to not render and this error is thrown:Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function
– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export inhistory/createBrowserHistory
– Shubham Khatri
Nov 13 '18 at 7:32
add a comment |
The custom history object need to be provided as a prop to the Router Provider component. In your case you can Specify a Router Provider in App.js or RouteList depending on whether Header and Footer also need Router props or not.
import browserHistory from './history.js';
...
render()
return (
<Router history=browserHistory>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
Also in your history.js file, import createBrowserHistory like
import createBrowserHistory from 'history/createBrowserHistory';
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
The custom history object need to be provided as a prop to the Router Provider component. In your case you can Specify a Router Provider in App.js or RouteList depending on whether Header and Footer also need Router props or not.
import browserHistory from './history.js';
...
render()
return (
<Router history=browserHistory>
<div>
<Header />
<RouteList />
<Footer />
</div>
</Router>
);
Also in your history.js file, import createBrowserHistory like
import createBrowserHistory from 'history/createBrowserHistory';
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
edited Nov 13 '18 at 7:26
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
answered Nov 13 '18 at 7:10
Shubham KhatriShubham Khatri
79.1k1494130
79.1k1494130
I tried that, it caused my entire application to not render and this error is thrown:Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function
– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export inhistory/createBrowserHistory
– Shubham Khatri
Nov 13 '18 at 7:32
add a comment |
I tried that, it caused my entire application to not render and this error is thrown:Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function
– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export inhistory/createBrowserHistory
– Shubham Khatri
Nov 13 '18 at 7:32
I tried that, it caused my entire application to not render and this error is thrown:
Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function– AKJ
Nov 13 '18 at 7:16
I tried that, it caused my entire application to not render and this error is thrown:
Uncaught TypeError: (0 , _history.createBrowserHistory) is not a function– AKJ
Nov 13 '18 at 7:16
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
@AKJ updated my answer, please check
– Shubham Khatri
Nov 13 '18 at 7:26
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
Beautiful! At least there is no error thrown now. Can you tell me why a simple re-declaration would stop the error from surfacing?
– AKJ
Nov 13 '18 at 7:30
createBrowserHistory is not exported as a named export from history module but is a default export in
history/createBrowserHistory– Shubham Khatri
Nov 13 '18 at 7:32
createBrowserHistory is not exported as a named export from history module but is a default export in
history/createBrowserHistory– Shubham Khatri
Nov 13 '18 at 7:32
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53275585%2fhistory-object-with-central-routes-file%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
