为什么此特定的React路由器配置不起作用？

Question

下面的代码将呈现一个我可以单击的链接，当我单击它时，我可以看到URL更改为/japanese_game作为URL path。然而..。页面上似乎没有什么变化，显示“日语”的链接仍然存在，没有变化。它应该显示<Route path="/japanese_game">中的其他内容，或者更确切地说，这是我希望它做的事情。

我做错了什么？

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

function App() {
    return (
        <div className="App container">
            <Router>
                <Switch>
                    <Route path="/">
                        <Link to="/japanese_game">
                            <div className="language-option">
                                Japanese
                                日本語
                            </div>
                        </Link>
                    </Route>
                    <Route path="/japanese_game">
                        <h1>Japanese Game</h1>
                        <Link to="/">
                            Go back
                        </Link>
                    </Route>
                </Switch>
            </Router>
        </div>
    );
}

export default App;

Answer 1

更改顺序，它会根据先匹配的结果进行比较和选择。将带有"/japanese_game“的路由放在第一位。

Answer 2

<Switch>组件呈现他匹配的第一个路由(doc)。

当您转到/japanese_game时，您还会遇到/路由，因此他会在/路由下呈现组件。

为了防止出现这种情况，您有两个选择：

1. 将exact道具添加到您的路径中：/ (hightly
2. exact/ of your route (根本不推荐)

Answer 3

更改路由的顺序，或者使用“精确”标志。

<Route exact path="/japanese_game">