ReactJS - React Router not changing component but url is changing

Question

I am rookie to ReactJS and recently start learning. I've created 2 components home and ContactList using TSX. I am using React-Router to change route.

App.JS

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

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';

class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Menulink></Menulink>
        <Router>
          <switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

Menulink.tsx:

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <Router>
                <switch>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
                </switch>
            </Router>

        )
    }
}

Issue is, when I click on link, URL change, but component is not getting replace. is it because I've written links and route both in different files?

Your switch looks weird. Import Switch from react-router and use that Also there is no need to wrap Links in Switch — Hayk Safaryan
– Hayk Safaryan, Commented Feb 7, 2019 at 7:43

Shubham Khatri · Accepted Answer · 2019-02-07 08:34:41Z

4

First, you need to have one Router instance

Second, MenuLink needs to be rendered as a Child of Router

Third, import Switch from react-router-dom

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

import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';



class App extends Component {
  render() {
    return (
      <div>
        <Header title="This is Header">
        </Header>
        <Router>
          <Route component={Menulink} />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/contact" component={ContactList} />
          </Switch>
        </Router>
        <Footer></Footer>
      </div>
    )
  }
}

export default App;

import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";

export class Menulink extends React.Component {
    render() {
        return (
            <React.Fragment>
                    <Link to="/">Home </Link> |
                    <Link to="/contact">Contact List</Link>
            </React.Fragment>

        )
    }
}

edited Feb 7, 2019 at 8:34

answered Feb 7, 2019 at 7:45

Shubham Khatri

284k58 gold badges431 silver badges411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hardik Gondalia Over a year ago

ok. got the issue. it was silly mistake, but I have just started to learn react. so happening this silly mistakes

ManavM · Accepted Answer · 2019-02-07 07:43:38Z

2

This is because you have two different Router instances. You need only One router instance at the Top of the component heirarchy. Or at the very least..the heirarchy that you expect to be changing with URLs.

So if you put your <MenuLink /> under the <Router> that is defining the routes, your routing will work fine.

answered Feb 7, 2019 at 7:43

ManavM

3,1082 gold badges23 silver badges33 bronze badges

Collectives™ on Stack Overflow

ReactJS - React Router not changing component but url is changing

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related