Question

我在完成React.js中的导航栏时遇到问题

我正在使用“ 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>
    );
}

当我单击“关于”或“摄影”时，没有任何反应。只是正在更改的URL。有人可以帮我吗？

Answer 1

尝试以这种方式定义路由器

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

在React.js中导航

1 个答案: