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?

Answer 1

Try to define your router this way

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