Почему эта конкретная конфигурация маршрутизатора React не работает?

Question

Приведенный ниже код отобразит ссылку, по которой я могу щелкнуть, и когда я нажму на нее, я увижу, что URL меняется на /japanese_game для пути URL. Однако ... на странице ничего не меняется, ссылка с надписью "Японский" все еще там, без изменений. Он должен отображать другие вещи в <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

Компонент <Switch> отображает первый соответствующий ему маршрут ( doc ).

Когда вы переходите на /japanese_game, вы также нажимаете / route, поэтому он отображаеткомпонент по маршруту /.

Чтобы предотвратить это, у вас есть 2 варианта:

1. Добавить exact реквизит к вашему маршруту /: <Route exact path="/"> (высокорекомендуется)
2. Изменить порядок маршрута (не рекомендуется)

Answer 2

Измените порядок, он сравнивает и выбирает, исходя из того, какой совпадет первым. сначала поместите маршрут с "/ japanese_game".

Answer 3

Измените порядок маршрутов или, в качестве альтернативы, используйте «точный» флаг.

<Route exact path="/japanese_game">