Show Component based on the url in react js

Question

I have different component like about us, contact component e.t.c. But I don't know how to show or update component based on the url.

Index.js

import React, { Component } from 'react'
import { Navbar } from 'react-bootstrap';
import Home from './components/Header';
import Home from './components/Home';
import Home from './components/About';
import Home from './components/Footer';

export default class Index extends Component {
    render() {
        return (
            <div>
        <Header />
        <Home />  # I want to make this component dynamic, so that I can change it based on the url selection
        <Footer />
            </div>
        )
    }
}

Routes.js

import React, { Component } from 'react';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
...
...


class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route exact path="/" component={Index} />
            <Route path="/about" component={About} />
            <Route path="/contact" component={Contact} />
            <Route path="/search" component={Search} />
            <Route exact path="/tag/:id" component={Tag} />
            <Route component={Error}/>
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

Header.js

import React, { Component } from 'react'
import { Navbar, Nav, NavDropdown } from 'react-bootstrap';

export default class Header extends Component {

    state = {
        tags: []
    }

    componentDidMount() {
        const tags = ['First', 'Second', 'Third'];
        this.setState({ tags });
    }

    render() {
        return (
            <div>
                <Navbar variant="dark" expand="lg">
                    <Navbar.Brand href="/">Title</Navbar.Brand>
                    <Navbar.Toggle aria-controls="basic-navbar-nav" />
                    <Navbar.Collapse id="basic-navbar-nav">
                        <Nav className="ml-auto">
                            <Nav.Link href="/" className="active">Home</Nav.Link>
                            <NavDropdown title="Tags" id="basic-nav-dropdown">
                                {
                                    this.state.tags.map(
                                        tag => <NavDropdown.Item href={ '#/tag/'+tag.id }>{tag.tag_name}</NavDropdown.Item>
                                    )
                                }
                            </NavDropdown>
                            <Nav.Link href="#/about">About me</Nav.Link>
                            <Nav.Link href="#/contact">Contact</Nav.Link>
                            <Nav.Link href="#/search"><i class="fa fa-search" aria-hidden="true"></i></Nav.Link>
                        </Nav>
                    </Navbar.Collapse>
                </Navbar>
            </div>
        )
    }
}

Its already doing this. Why you want Index.js. If u need Header just add Header component in your app.js And if you want to render based on url you can simply do if else based on url you can render different component — Shubham Verma
– Shubham Verma, Commented Jun 9, 2020 at 14:06

Ozan Aydın · Accepted Answer · 2020-06-09 14:45:05Z

1

If i understood correctly what you wanted to do, you can call your Router component where you want to make Route.

But you should not use Link outside the Router, so in this scenario you need to wrap also your Header with your Router.

export default class Index extends Component {
    render() {
        return (
            <div>
            <Router>
              <Header />
              <App /> (In here you can make Routing)
              <Footer />
            </Router>
            </div>
        )
    }
}

answered Jun 9, 2020 at 14:45

Ozan Aydın

111 silver badge2 bronze badges

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

Collectives™ on Stack Overflow

Show Component based on the url in react js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related