Styjun

Why wasn't EBCDIC designed with contiguous alphanumeric characters?

Having to constantly redo everything because I don't know how to do it?

Is there a way to convert blue ice back into packed ice?

If you kill a Solar Angel can you use its Slaying Longbow?

List Manipulation : a,b,c,d,e,f,g,h into a,b,c,d,e,f,g,h

How do I ask a good question about a topic I am not completely familiar with?

I just started should I accept a farewell lunch for a coworker I don't know?

Do the 26 richest billionaires own as much wealth as the poorest 3.8 billion people?

What happens if a caster is surprised while casting a spell with a long casting time?

Alien life interbreeding with Earth life

Can I use Alchemist's fire to turn my sword into a virtual Flame Blade?

"I am [the / an] owner of a bookstore"?

How can I deal with extreme temperatures in a hotel room?

How to stop the sales department from selling functionalities that don't exist

Does a lens with a bigger max. aperture focus faster than a lens with a smaller max. aperture?

Closest Proximity of Oceans to Freshwater Springs

/etc/hosts not working

How do ohm meters measure high resistances?

Checkmate in 1 on a Tangled Board

Calculus, Water Poured into a Cone: Why is Derivative Non-linear?

How do I tell the reader that my character is autistic in Fantasy?

Reusable spacecraft: why still have fairings detach, instead of open/close?

How can I open this door latch with the knobs removed?

How did they film the Invisible Man being invisible, in 1933?

React Router URL Change but Not Component

How to change an element's class with JavaScript?Encode URL in JavaScript?Get current URL with jQuery?Get the current URL with JavaScript?Loop inside React JSXProgrammatically navigate using react routerReact Router with optional path parameterNested routes with react router v4 / v5React Component not showing on matched Route (react-router-dom)How to render NotFound Component react-router-config

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty margin-bottom:0;

0

React Router change the URL but the component is not rendered
I have already looked for answer but none of those example is worked
Current React Router & React Router DOM version is 5.0.0
It's still plain create-react-app

I've tried to use Switch tag

import React, Component from 'react';
import logo from './logo.svg';
import './App.css';
import BrowserRouter as Router, Route, Link from 'react-router-dom';

const Index = () => 
 return <h2>Home</h2>;
;

const About = () => 
 return <h2>About</h2>;
;

const Users = () => 
 return <h2>Users</h2>;
;

class App extends Component 
 render() 
 return (
 <Router>
 <div className="App">
 <header className="App-header">
 <li>
 <Link to="/">
 <h1>Home</h1>
 </Link>
 </li>
 <li>
 <Link to="/about">
 <h1>About</h1>
 </Link>
 </li>
 <li>
 <Link to="/users">
 <h1>Users</h1>
 </Link>
 </li>
 </header>
 <hr />
 <Route exact path="/" Component=Index />
 <Route path="/about" Component=About />
 <Route path="/users" Component=Users />
 </div>
 </Router>
 );
 


export default App;

It wont render the component

javascript reactjs react-router

share|improve this question

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

add a comment | 

0

React Router change the URL but the component is not rendered
I have already looked for answer but none of those example is worked
Current React Router & React Router DOM version is 5.0.0
It's still plain create-react-app

I've tried to use Switch tag

import React, Component from 'react';
import logo from './logo.svg';
import './App.css';
import BrowserRouter as Router, Route, Link from 'react-router-dom';

const Index = () => 
 return <h2>Home</h2>;
;

const About = () => 
 return <h2>About</h2>;
;

const Users = () => 
 return <h2>Users</h2>;
;

class App extends Component 
 render() 
 return (
 <Router>
 <div className="App">
 <header className="App-header">
 <li>
 <Link to="/">
 <h1>Home</h1>
 </Link>
 </li>
 <li>
 <Link to="/about">
 <h1>About</h1>
 </Link>
 </li>
 <li>
 <Link to="/users">
 <h1>Users</h1>
 </Link>
 </li>
 </header>
 <hr />
 <Route exact path="/" Component=Index />
 <Route path="/about" Component=About />
 <Route path="/users" Component=Users />
 </div>
 </Router>
 );
 


export default App;

It wont render the component

javascript reactjs react-router

share|improve this question

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

add a comment | 

React Router change the URL but the component is not rendered
I have already looked for answer but none of those example is worked
Current React Router & React Router DOM version is 5.0.0
It's still plain create-react-app

I've tried to use Switch tag

import React, Component from 'react';
import logo from './logo.svg';
import './App.css';
import BrowserRouter as Router, Route, Link from 'react-router-dom';

const Index = () => 
 return <h2>Home</h2>;
;

const About = () => 
 return <h2>About</h2>;
;

const Users = () => 
 return <h2>Users</h2>;
;

class App extends Component 
 render() 
 return (
 <Router>
 <div className="App">
 <header className="App-header">
 <li>
 <Link to="/">
 <h1>Home</h1>
 </Link>
 </li>
 <li>
 <Link to="/about">
 <h1>About</h1>
 </Link>
 </li>
 <li>
 <Link to="/users">
 <h1>Users</h1>
 </Link>
 </li>
 </header>
 <hr />
 <Route exact path="/" Component=Index />
 <Route path="/about" Component=About />
 <Route path="/users" Component=Users />
 </div>
 </Router>
 );
 


export default App;

It wont render the component

javascript reactjs react-router

share|improve this question

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

import React, Component from 'react';
import logo from './logo.svg';
import './App.css';
import BrowserRouter as Router, Route, Link from 'react-router-dom';

const Index = () => 
 return <h2>Home</h2>;
;

const About = () => 
 return <h2>About</h2>;
;

const Users = () => 
 return <h2>Users</h2>;
;

class App extends Component 
 render() 
 return (
 <Router>
 <div className="App">
 <header className="App-header">
 <li>
 <Link to="/">
 <h1>Home</h1>
 </Link>
 </li>
 <li>
 <Link to="/about">
 <h1>About</h1>
 </Link>
 </li>
 <li>
 <Link to="/users">
 <h1>Users</h1>
 </Link>
 </li>
 </header>
 <hr />
 <Route exact path="/" Component=Index />
 <Route path="/about" Component=About />
 <Route path="/users" Component=Users />
 </div>
 </Router>
 );
 


export default App;

share|improve this question

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

share|improve this question

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

asked Mar 25 at 14:54

Jasson HarsojoJasson Harsojo

7533 silver badges1212 bronze badges

2 Answers
2

active

oldest

votes

2

Try setting the 'component' attribute with lowercase c

share|improve this answer

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  omg you're right.... :) my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Also in case you run into this problem later, you can also send in props to the component by making it a function like this: component = () => <Index user = this.state.loggedIn/>
  
  – Marc Sloth Eastman
  Mar 25 at 15:30
  

  
  
  
  

add a comment | 

2

I think it's a simple mistake. You capitalized the attribute word component in your Routes.

share|improve this answer

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah yes you're right.. my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  

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
);



);

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

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55340595%2freact-router-url-change-but-not-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

2

Try setting the 'component' attribute with lowercase c

share|improve this answer

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  omg you're right.... :) my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Also in case you run into this problem later, you can also send in props to the component by making it a function like this: component = () => <Index user = this.state.loggedIn/>
  
  – Marc Sloth Eastman
  Mar 25 at 15:30
  

  
  
  
  

add a comment | 

2

Try setting the 'component' attribute with lowercase c

share|improve this answer

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  omg you're right.... :) my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  


• 
  
  
  

  
  1
  

  
  
  
  
  
  

  
  
  Also in case you run into this problem later, you can also send in props to the component by making it a function like this: component = () => <Index user = this.state.loggedIn/>
  
  – Marc Sloth Eastman
  Mar 25 at 15:30
  

  
  
  
  

add a comment | 

Try setting the 'component' attribute with lowercase c

share|improve this answer

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

share|improve this answer

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

answered Mar 25 at 14:57

Marc Sloth EastmanMarc Sloth Eastman

1731111 bronze badges

2

I think it's a simple mistake. You capitalized the attribute word component in your Routes.

share|improve this answer

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah yes you're right.. my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  

add a comment | 

2

I think it's a simple mistake. You capitalized the attribute word component in your Routes.

share|improve this answer

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  ah yes you're right.. my bad..
  
  – Jasson Harsojo
  Mar 25 at 15:05
  

  
  
  
  

add a comment | 

I think it's a simple mistake. You capitalized the attribute word component in your Routes.

share|improve this answer

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

share|improve this answer

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges

answered Mar 25 at 15:00

Katia AlamirKatia Alamir

9644 bronze badges