How to make this.props.history available without being router to a component
up vote
0
down vote
favorite
In my App.js, I'm trying to make available the this.props.history from the 'react-router-dom'.
Relavant code is App.js is:
import {BrowserRouter, Route, Switch, withRouter} from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login}/>
<Route path="/" component={MainApp}/>
</Switch>
</BrowserRouter>
);
}
}
const appWithAuth = withRouter(App);
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
Then I get the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
And the error points to index.js:
> 22 | ReactDOM.render(
23 | <Provider store={store}><App/></Provider>
24 | , document.getElementById('root'));
25 | registerServiceWorker();
I researched this error but it seems very specific to individual problems. I did try to run npm install react-router-redux@next, but it didn't help.
Thanks in advance!
reactjs react-router
asked Nov 11 at 17:13
sir-haver
577
add a comment |
up vote
0
down vote
favorite
In my App.js, I'm trying to make available the this.props.history from the 'react-router-dom'.
Relavant code is App.js is:
import {BrowserRouter, Route, Switch, withRouter} from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login}/>
<Route path="/" component={MainApp}/>
</Switch>
</BrowserRouter>
);
}
}
const appWithAuth = withRouter(App);
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
Then I get the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
And the error points to index.js:
> 22 | ReactDOM.render(
23 | <Provider store={store}><App/></Provider>
24 | , document.getElementById('root'));
25 | registerServiceWorker();
I researched this error but it seems very specific to individual problems. I did try to run npm install react-router-redux@next, but it didn't help.
Thanks in advance!
reactjs react-router
asked Nov 11 at 17:13
sir-haver
577
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
In my App.js, I'm trying to make available the this.props.history from the 'react-router-dom'.
Relavant code is App.js is:
import {BrowserRouter, Route, Switch, withRouter} from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login}/>
<Route path="/" component={MainApp}/>
</Switch>
</BrowserRouter>
);
}
}
const appWithAuth = withRouter(App);
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
Then I get the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
And the error points to index.js:
> 22 | ReactDOM.render(
23 | <Provider store={store}><App/></Provider>
24 | , document.getElementById('root'));
25 | registerServiceWorker();
I researched this error but it seems very specific to individual problems. I did try to run npm install react-router-redux@next, but it didn't help.
Thanks in advance!
reactjs react-router
asked Nov 11 at 17:13
sir-haver
577
In my App.js, I'm trying to make available the this.props.history from the 'react-router-dom'.
Relavant code is App.js is:
import {BrowserRouter, Route, Switch, withRouter} from 'react-router-dom';
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/login" exact component={Login}/>
<Route path="/" component={MainApp}/>
</Switch>
</BrowserRouter>
);
}
}
const appWithAuth = withRouter(App);
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
Then I get the error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
And the error points to index.js:
> 22 | ReactDOM.render(
23 | <Provider store={store}><App/></Provider>
24 | , document.getElementById('root'));
25 | registerServiceWorker();
I researched this error but it seems very specific to individual problems. I did try to run npm install react-router-redux@next, but it didn't help.
Thanks in advance!
reactjs react-router
reactjs react-router
asked Nov 11 at 17:13
sir-haver
577
asked Nov 11 at 17:13
sir-haver
577
asked Nov 11 at 17:13
sir-haver
577
asked Nov 11 at 17:13
sir-haver
577
asked Nov 11 at 17:13
sir-haver
577
577
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
This is invalid:
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
It should be
export default withRouter(App);
However, if you're trying to do authentication, please read this.
answered Nov 11 at 17:20
matt carlotta
2,02749
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
add a comment |
up vote
0
down vote
for anybody who had the same issue:
You need to wrap the reactDOM.render with BrowserRouter for it to work:
ReactDOM.render(
<BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
Thanks to Matt for the clarification
answered Nov 11 at 17:45
sir-haver
577
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',
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%2f53251185%2fhow-to-make-this-props-history-available-without-being-router-to-a-component%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
This is invalid:
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
It should be
export default withRouter(App);
However, if you're trying to do authentication, please read this.
answered Nov 11 at 17:20
matt carlotta
2,02749
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
add a comment |
up vote
0
down vote
accepted
This is invalid:
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
It should be
export default withRouter(App);
However, if you're trying to do authentication, please read this.
answered Nov 11 at 17:20
matt carlotta
2,02749
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
This is invalid:
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
It should be
export default withRouter(App);
However, if you're trying to do authentication, please read this.
answered Nov 11 at 17:20
matt carlotta
2,02749
This is invalid:
export default <BrowserRouter><appWithAuth/></BrowserRouter>;
It should be
export default withRouter(App);
However, if you're trying to do authentication, please read this.
answered Nov 11 at 17:20
matt carlotta
2,02749
answered Nov 11 at 17:20
matt carlotta
2,02749
answered Nov 11 at 17:20
matt carlotta
2,02749
answered Nov 11 at 17:20
matt carlotta
2,02749
2,02749
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
add a comment |
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt, I did try with export default withRouter(App). It throws the following error: You should not use <Route> or withRouter() outside a <Router>. And it points to index.js again: > 22 | ReactDOM.render( 23 | <Provider store={store}><App/></Provider> 24 | , document.getElementById('root')); 25 | registerServiceWorker();
– sir-haver
Nov 11 at 17:38
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
Hey Matt I got it working, I should wrap the <BrowserRouter> inside index.js for it to work. Thanks for your help!
– sir-haver
Nov 11 at 17:44
add a comment |
up vote
0
down vote
for anybody who had the same issue:
You need to wrap the reactDOM.render with BrowserRouter for it to work:
ReactDOM.render(
<BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
Thanks to Matt for the clarification
answered Nov 11 at 17:45
sir-haver
577
add a comment |
up vote
0
down vote
for anybody who had the same issue:
You need to wrap the reactDOM.render with BrowserRouter for it to work:
ReactDOM.render(
<BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
Thanks to Matt for the clarification
answered Nov 11 at 17:45
sir-haver
577
add a comment |
up vote
0
down vote
up vote
0
down vote
for anybody who had the same issue:
You need to wrap the reactDOM.render with BrowserRouter for it to work:
ReactDOM.render(
<BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
Thanks to Matt for the clarification
answered Nov 11 at 17:45
sir-haver
577
for anybody who had the same issue:
You need to wrap the reactDOM.render with BrowserRouter for it to work:
ReactDOM.render(
<BrowserRouter>
<Provider store={store}><App/></Provider></BrowserRouter>
, document.getElementById('root'));
registerServiceWorker();
Thanks to Matt for the clarification
answered Nov 11 at 17:45
sir-haver
577
answered Nov 11 at 17:45
sir-haver
577
answered Nov 11 at 17:45
sir-haver
577
answered Nov 11 at 17:45
sir-haver
577
577
add a comment |
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%2f53251185%2fhow-to-make-this-props-history-available-without-being-router-to-a-component%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
