首先

我最近正在学习React，所以我会自行记录并编写此次会议记录。
虽然我认为这些文章大致都已经发布了，所以最好参考其他人的文章。
这完全是出于自我满足。

迷上了这个代码

import { BrowserRouter, Link, Switch, Route } from "react-router-dom"

/**省略**/

<BrowserRouter>
        <Link to="/">Home</Link><br/>
        <Link to="/page01">page01</Link><br/>
        <Link to="/page02">page02</Link><br/>

        <Switch>
          <Route exact path="/"><Home /></Route>

          <Route 
            path="/page01" 
            render={({match: {url}}) => (
              <Switch>
                <Route exact path={url}>
                  <Page01/>
                </Route>

                <Route exact path={`${url}/detailA`}>
                  <Page01DetailA/>
                </Route>

                <Route exact path={`${url}/detailB`}>
                  <Page01DetailB />
                </Route>
              </Switch>
          )} />

          <Route path="/page02"><Page02 /></Route>
        </Switch>
</BrowserRouter>

/**省略**/

嗯，我刚刚使用了类似router-dom的包在 React 中学习路由。
但它就是不能运行！！

大概会发生像是「写法不同！要用Routes和Navigate」或者「Route绝对要放在Routes里面！」这样的错误。
因为大多数情况下会发生这种错误，所以无法使用History或Switch。

真是个困扰啊。

造成了这种现象的原因

查看上述代码的错误后，发现问题是因为react-router-dom的β版v6导致的。似乎无法再使用之前那种陷入困境的代码写法了…
唉，感觉安装包时过于轻率反而弄巧成拙了。

解决方案

熟悉v6的规范

如果在现在就熟悉这个 V6，以后做起来会更容易吧？
因为在 V5 中可能需要指定 exact，所以看起来有很多改进。
我觉得在这边普通处理更加有意义。
而且，简单来说，更易于阅读。

希望你参考上述内容。

将其版本降级到v5.

只要降低npm软件包的版本即可。
以下是命令：

npm i -S react-router-dom@5

总结

刚开始学习React的人，如果用一些旧的教材或网站学习，容易遇到这个错误。我也是其中之一，所以写下来作为备忘录。

※ 我的主要職業不是在前台工作。 (※ My main occupation is not in the front desk.)