Question

下面的代码将呈现一个我可以单击的链接，当我单击它时，我可以看到URL更改为URL路径为/japanese_game。但是...页面上没有任何变化，显示“日语”的链接仍然存在，没有任何变化。它应该在<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时，您还击中了/路线，因此他在/路线下渲染了组件。

为防止这种情况，您有2种选择：

向您的路线exact：/添加<Route exact path="/">道具（强烈建议）
更改路线的ordre（一点都不建议）

Answer 3

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

<Route exact path="/japanese_game">

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

3 个答案: