webpage is not moving backwards using react-router v4












0















I added this react router to my app.when user searches something the app programatically routes to /search but when i try to move backwards nothing is rendered.I have added initial component in route tag






            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>












share|improve this question























  • Is both the /search and / component wrapped in withRouter(...)?

    – Shawn Andrews
    Nov 27 '18 at 2:25











  • No.only Navbar is wrapped with withRouter

    – user10348019
    Nov 27 '18 at 2:52











  • Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

    – Shawn Andrews
    Nov 27 '18 at 2:59











  • i wrapped both with withRouter .didnt work

    – user10348019
    Nov 27 '18 at 3:04













  • Can you please try following? this.props.history.goBack();

    – Krina Soni
    Nov 27 '18 at 5:23
















0















I added this react router to my app.when user searches something the app programatically routes to /search but when i try to move backwards nothing is rendered.I have added initial component in route tag






            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>












share|improve this question























  • Is both the /search and / component wrapped in withRouter(...)?

    – Shawn Andrews
    Nov 27 '18 at 2:25











  • No.only Navbar is wrapped with withRouter

    – user10348019
    Nov 27 '18 at 2:52











  • Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

    – Shawn Andrews
    Nov 27 '18 at 2:59











  • i wrapped both with withRouter .didnt work

    – user10348019
    Nov 27 '18 at 3:04













  • Can you please try following? this.props.history.goBack();

    – Krina Soni
    Nov 27 '18 at 5:23














0












0








0








I added this react router to my app.when user searches something the app programatically routes to /search but when i try to move backwards nothing is rendered.I have added initial component in route tag






            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>












share|improve this question














I added this react router to my app.when user searches something the app programatically routes to /search but when i try to move backwards nothing is rendered.I have added initial component in route tag






            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>








            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>





            <Link to="/">
<MovieIcon style={{ fontSize: "48px", cursor: "pointer" }} />
</Link>
<div className={classes.grow} />
<div className={classes.search} onKeyDown={this.handleSearch}>
<div className={classes.searchIcon}>
<SearchIcon />
</div>

<InputBase
placeholder="Search…"
classes={{
root: classes.inputRoot,
input: classes.inputInput
}}
/>
</div>

handleSearch = e => {
if (e.which === 13 && e.target.value !== "") {
this.props.handleSearch(e.target.value);
this.props.history.push("/search");
}

app.js

<div className="App">
<Navbar handleSearch={this.props.searchMovie} />

<Route
exact
path="/"
render={props => {
console.log("rendering movie browser");
return <Moviebrowser {...props} topMovies={this.props.topMovies} />;
}}
/>
<Route path="/search" component={MovieSearch} />
</div>
index.js
const app = (
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
);
ReactDOM.render(app, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>






javascript reactjs react-router






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 27 '18 at 2:00









user10348019user10348019

112




112













  • Is both the /search and / component wrapped in withRouter(...)?

    – Shawn Andrews
    Nov 27 '18 at 2:25











  • No.only Navbar is wrapped with withRouter

    – user10348019
    Nov 27 '18 at 2:52











  • Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

    – Shawn Andrews
    Nov 27 '18 at 2:59











  • i wrapped both with withRouter .didnt work

    – user10348019
    Nov 27 '18 at 3:04













  • Can you please try following? this.props.history.goBack();

    – Krina Soni
    Nov 27 '18 at 5:23



















  • Is both the /search and / component wrapped in withRouter(...)?

    – Shawn Andrews
    Nov 27 '18 at 2:25











  • No.only Navbar is wrapped with withRouter

    – user10348019
    Nov 27 '18 at 2:52











  • Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

    – Shawn Andrews
    Nov 27 '18 at 2:59











  • i wrapped both with withRouter .didnt work

    – user10348019
    Nov 27 '18 at 3:04













  • Can you please try following? this.props.history.goBack();

    – Krina Soni
    Nov 27 '18 at 5:23

















Is both the /search and / component wrapped in withRouter(...)?

– Shawn Andrews
Nov 27 '18 at 2:25





Is both the /search and / component wrapped in withRouter(...)?

– Shawn Andrews
Nov 27 '18 at 2:25













No.only Navbar is wrapped with withRouter

– user10348019
Nov 27 '18 at 2:52





No.only Navbar is wrapped with withRouter

– user10348019
Nov 27 '18 at 2:52













Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

– Shawn Andrews
Nov 27 '18 at 2:59





Can you wrap both Moviebrowser and MovieSearch in withRouter(...) then tell me if that fixes the rendering?

– Shawn Andrews
Nov 27 '18 at 2:59













i wrapped both with withRouter .didnt work

– user10348019
Nov 27 '18 at 3:04







i wrapped both with withRouter .didnt work

– user10348019
Nov 27 '18 at 3:04















Can you please try following? this.props.history.goBack();

– Krina Soni
Nov 27 '18 at 5:23





Can you please try following? this.props.history.goBack();

– Krina Soni
Nov 27 '18 at 5:23












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


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53491706%2fwebpage-is-not-moving-backwards-using-react-router-v4%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














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53491706%2fwebpage-is-not-moving-backwards-using-react-router-v4%23new-answer', 'question_page');
}
);

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







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)