React Router won't render components properly
up vote
0
down vote
favorite
I am trying to use render two components at once. There's two routes: /:id/ and /:id/:pokemonId/. When I hit the /:id/ route, everything works as it should, but when I go to /:id/:pokemonId/ no styles are loaded, but the content shows up. There is also an infinite axios request happening (I don't know if these are related). Ideally, both routes will load with the /:id/ content on the bottom and the /:pokemonId/ content at the top.
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
In my components, I am calling the functions props.updatePokemon() and props.findPokemonById() and then displaying it in a very basic way, so I don't think the code there changes anything. It is being called immediately if that matters.
Why are the stylesheets rendering in one route and not the other? Is it related to getting infinite requests?
javascript reactjs react-router
edited Nov 10 at 17:37
Minderov
4541615
asked Nov 10 at 17:34
Michael Koska
186
add a comment |
up vote
0
down vote
favorite
I am trying to use render two components at once. There's two routes: /:id/ and /:id/:pokemonId/. When I hit the /:id/ route, everything works as it should, but when I go to /:id/:pokemonId/ no styles are loaded, but the content shows up. There is also an infinite axios request happening (I don't know if these are related). Ideally, both routes will load with the /:id/ content on the bottom and the /:pokemonId/ content at the top.
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
In my components, I am calling the functions props.updatePokemon() and props.findPokemonById() and then displaying it in a very basic way, so I don't think the code there changes anything. It is being called immediately if that matters.
Why are the stylesheets rendering in one route and not the other? Is it related to getting infinite requests?
javascript reactjs react-router
edited Nov 10 at 17:37
Minderov
4541615
asked Nov 10 at 17:34
Michael Koska
186
1
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I am trying to use render two components at once. There's two routes: /:id/ and /:id/:pokemonId/. When I hit the /:id/ route, everything works as it should, but when I go to /:id/:pokemonId/ no styles are loaded, but the content shows up. There is also an infinite axios request happening (I don't know if these are related). Ideally, both routes will load with the /:id/ content on the bottom and the /:pokemonId/ content at the top.
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
In my components, I am calling the functions props.updatePokemon() and props.findPokemonById() and then displaying it in a very basic way, so I don't think the code there changes anything. It is being called immediately if that matters.
Why are the stylesheets rendering in one route and not the other? Is it related to getting infinite requests?
javascript reactjs react-router
edited Nov 10 at 17:37
Minderov
4541615
asked Nov 10 at 17:34
Michael Koska
186
I am trying to use render two components at once. There's two routes: /:id/ and /:id/:pokemonId/. When I hit the /:id/ route, everything works as it should, but when I go to /:id/:pokemonId/ no styles are loaded, but the content shows up. There is also an infinite axios request happening (I don't know if these are related). Ideally, both routes will load with the /:id/ content on the bottom and the /:pokemonId/ content at the top.
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
In my components, I am calling the functions props.updatePokemon() and props.findPokemonById() and then displaying it in a very basic way, so I don't think the code there changes anything. It is being called immediately if that matters.
Why are the stylesheets rendering in one route and not the other? Is it related to getting infinite requests?
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
import React, Component from "react";
import
BrowserRouter as Router,
Route
from "react-router-dom";
import PokecardList from "./Pokecard_List";
import PagelinksList from "./Pagelinks_List";
import PokecardInfo from "./Pokecard_Info";
const axios = require("axios");
class Main extends Component
constructor(props)
super(props);
this.state =
pokemon: ,
selectedPage: null,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`,
pageInfo: null,
selectedPokemon: null
;
getPokemon.call(this)
render()
return (
<Router>
<div>
<Route
path="/:id/:pokemonId/"
render=(props) => <PokecardInfo
selectedPokemon=this.state.selectedPokemon
findPokemonById=() =>
axios.get(`$this.state.url?name=$props.match.params.pokemonId`)
.then(( data ) =>
this.setState(
selectedPokemon: data.data
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<Route
path="/:id/"
render=(props) => <PokecardList
pokemon=this.state.pokemon
updatePokemon=() =>
axios.get(`$this.state.url?page=$props.match.params.id`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: props.match.params.id
)
)
.catch((error) =>
console.log(error);
)
...props
/>
/>
<div>
<PagelinksList
pageInfo=this.state.pageInfo
/>
</div>
</div>
</Router>
);
//put into another file
function getPokemon()
axios.get(`$this.state.url`)
.then(( data ) =>
this.setState(
pokemon: data.data,
selectedPage: data.meta.current_page,
pageInfo: data.meta,
url: `https://intern-pokedex.myriadapps.com/api/v1/pokemon`
);
)
.catch((error) =>
console.log(error);
)
javascript reactjs react-router
javascript reactjs react-router
edited Nov 10 at 17:37
Minderov
4541615
asked Nov 10 at 17:34
Michael Koska
186
edited Nov 10 at 17:37
Minderov
4541615
asked Nov 10 at 17:34
Michael Koska
186
edited Nov 10 at 17:37
Minderov
4541615
edited Nov 10 at 17:37
Minderov
4541615
edited Nov 10 at 17:37
Minderov
4541615
4541615
asked Nov 10 at 17:34
Michael Koska
186
asked Nov 10 at 17:34
Michael Koska
186
asked Nov 10 at 17:34
Michael Koska
186
186
1
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04
add a comment |
1
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04
1
1
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53241630%2freact-router-wont-render-components-properly%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
1
should put in getPokemon.call(this) inside componentDidMount() instead imo
– Matt Pengelly
Nov 10 at 17:38
Thanks, I will look into that. First time using react so this is tutorial project and I had no idea that existed.
– Michael Koska
Nov 10 at 17:48
@MichaelKoska read the official docs first, specifically the component API ;)
– c-chavez
Nov 11 at 14:04