React router 4 routing stopped working after changing from HashRouter to browserRouter
0
I have a simple react application with my router below
index.tsx
import { HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<HashRouter>
<AppContainer />
</HashRouter>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
My AppContainer
const mapStateToProps = (state, ownProps) => {
console.log("The state is here and now ", state);
return {
account: state.account,
}
}
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
return {
getUsers: () => dispatch(actions.fetchUser()),
}
};
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps, mergeProps)(AppComponent));
and my AppComponent render method reyurns
render() {
return (
<div className="main-app">
<Route exact path='/' component={HomeContainer} />
<Route path="/login" component={LoginComponent} />
<Route path="/home" component={HomeContainer} />
<Route path="/about" component={AboutContainer} />
</div>
)
}
My app was working fine, then we decided we needed to use BrowserRouter instead. Simply changing my index.tsx to
import { BrowserRouter as Router, HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<AppContainer />
</Router>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
Breaks my routing. Now it stays on the first route regardless. I have tried everything and somewhere , someone suggested changing my publicPath in webpack from empty to / . I did yet nothing change. Please what am i missing. I have tried everything yet to no aveil . Any help wold be appreciated.
reactjs react-router-v4
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
add a comment |
0
I have a simple react application with my router below
index.tsx
import { HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<HashRouter>
<AppContainer />
</HashRouter>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
My AppContainer
const mapStateToProps = (state, ownProps) => {
console.log("The state is here and now ", state);
return {
account: state.account,
}
}
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
return {
getUsers: () => dispatch(actions.fetchUser()),
}
};
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps, mergeProps)(AppComponent));
and my AppComponent render method reyurns
render() {
return (
<div className="main-app">
<Route exact path='/' component={HomeContainer} />
<Route path="/login" component={LoginComponent} />
<Route path="/home" component={HomeContainer} />
<Route path="/about" component={AboutContainer} />
</div>
)
}
My app was working fine, then we decided we needed to use BrowserRouter instead. Simply changing my index.tsx to
import { BrowserRouter as Router, HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<AppContainer />
</Router>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
Breaks my routing. Now it stays on the first route regardless. I have tried everything and somewhere , someone suggested changing my publicPath in webpack from empty to / . I did yet nothing change. Please what am i missing. I have tried everything yet to no aveil . Any help wold be appreciated.
reactjs react-router-v4
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47
add a comment |
0
0
0
I have a simple react application with my router below
index.tsx
import { HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<HashRouter>
<AppContainer />
</HashRouter>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
My AppContainer
const mapStateToProps = (state, ownProps) => {
console.log("The state is here and now ", state);
return {
account: state.account,
}
}
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
return {
getUsers: () => dispatch(actions.fetchUser()),
}
};
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps, mergeProps)(AppComponent));
and my AppComponent render method reyurns
render() {
return (
<div className="main-app">
<Route exact path='/' component={HomeContainer} />
<Route path="/login" component={LoginComponent} />
<Route path="/home" component={HomeContainer} />
<Route path="/about" component={AboutContainer} />
</div>
)
}
My app was working fine, then we decided we needed to use BrowserRouter instead. Simply changing my index.tsx to
import { BrowserRouter as Router, HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<AppContainer />
</Router>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
Breaks my routing. Now it stays on the first route regardless. I have tried everything and somewhere , someone suggested changing my publicPath in webpack from empty to / . I did yet nothing change. Please what am i missing. I have tried everything yet to no aveil . Any help wold be appreciated.
reactjs react-router-v4
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
I have a simple react application with my router below
index.tsx
import { HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<HashRouter>
<AppContainer />
</HashRouter>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
My AppContainer
const mapStateToProps = (state, ownProps) => {
console.log("The state is here and now ", state);
return {
account: state.account,
}
}
const mapDispatchToProps = (dispatch: Dispatch<any>) => {
return {
getUsers: () => dispatch(actions.fetchUser()),
}
};
export default withRouter<any>(connect(mapStateToProps, mapDispatchToProps, mergeProps)(AppComponent));
and my AppComponent render method reyurns
render() {
return (
<div className="main-app">
<Route exact path='/' component={HomeContainer} />
<Route path="/login" component={LoginComponent} />
<Route path="/home" component={HomeContainer} />
<Route path="/about" component={AboutContainer} />
</div>
)
}
My app was working fine, then we decided we needed to use BrowserRouter instead. Simply changing my index.tsx to
import { BrowserRouter as Router, HashRouter } from 'react-router-dom';
render(
<Provider store={store}>
<PersistGate loading={null} persistor={persistor}>
<Router>
<AppContainer />
</Router>
</PersistGate>
</Provider>, document.getElementById('app') as HTMLElement);
Breaks my routing. Now it stays on the first route regardless. I have tried everything and somewhere , someone suggested changing my publicPath in webpack from empty to / . I did yet nothing change. Please what am i missing. I have tried everything yet to no aveil . Any help wold be appreciated.
reactjs react-router-v4
reactjs react-router-v4
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
asked Nov 21 '18 at 12:36
Nuru SalihuNuru Salihu
2,19693972
2,19693972
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47
add a comment |
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47
add a comment |
0
active
oldest
votes
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
});
}
});
draft saved
draft discarded
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%2f53412189%2freact-router-4-routing-stopped-working-after-changing-from-hashrouter-to-browser%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
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.
draft saved
draft discarded
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%2f53412189%2freact-router-4-routing-stopped-working-after-changing-from-hashrouter-to-browser%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
by any change does the url contains # in it. Also are you trying to navigate using web url or links within your app
– Shubham Khatri
Nov 21 '18 at 12:41
@ShubhamKhatri i am trying to navigate using web url. It doesn't work even without the hash
– Nuru Salihu
Nov 21 '18 at 12:43
Also i try navigating using the Link component of react-router-dom, yet it doesn't change or navigate.
– Nuru Salihu
Nov 21 '18 at 12:47