Navigation in React.js

Question

I have problem with completing my navigation bar in React.js

I'm using "react-router-dom": "^5.0.1"

function Navigation() {
    return (
            <header>
                <div className="logo">
                    <a href={"#"}><img id={"logo-img"} src={logo} width={250}/></a>
                </div>
                <Switch>
                    <div>
                        <nav>
                            <ul>
                                <li><Link to="/about/">About</Link></li>
                                <li><Link to="/photography/">Photography</Link></li>
                            </ul>
                        </nav>
                    </div>
                    <div>
                        <Route path={"/about/"} component={About}/>
                        <Route path={"/photography/"} component={Photography}/>
                    </div>
                </Switch>
            </header>
    );
}

When I click on 'About' or 'Photography' nothing happens. Just the URL that is changing. Can someone help me please?

Sarthak · Accepted Answer · 2019-06-22 19:43:20Z

1

Try to define your router this way

<Router history={history}>
        <Switch>
            <Route path="/about" component={About} />
            <Route path="/photography" component={Photography} />
        </Switch>
    </Router>

answered Jun 22, 2019 at 19:43

Sarthak

1838 bronze badges

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

Collectives™ on Stack Overflow

Navigation 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