找不到React Router v5嵌套路由

我在尝试进行简单设置以运行时遇到问题。我使用了“ react-router-dom”，因为它声称是记录最全的路由器。不幸的是，文档样本使用的是函数而不是类，并且我认为正在运行的样本不会解释路由与以前版本相比的变化……您需要很好的视野！顺便说一句，版本之间有很多重大更改。

我想要以下组件结构：

• 家
  • 登录
  • 寄存器
• 菜谱
• 配料

具有以下组成部分：

index.js（工作正常）

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';
import App from './App';

ReactDOM.render((
    <BrowserRouter>
        <Route component={App}/>
    </BrowserRouter>
), document.getElementById('root'));

App.js（精）

import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './Home'
import Recipes from './recipes/Recipes'
import Ingredients from './ingredients/Ingredients'

class App extends React.Component {
    render() {
        return (
            <div id="App">
                <Switch>
                    <Route exact path='/home' component={Home} />
                    <Route path='/recipes' component={Recipes} />
                    <Route path='/ingredients' component={Ingredients} />
                    <Route render={() => <h1>Not found!</h1>} />
                </Switch>
            </div>
    );
  }
}

export default YanuqApp;

食材和配方成分工作正常，所以我从这里跳过

Home.js-问题从这里开始。主页本身可以正确加载，但是一旦单击“登录”或“注册”链接，它就会显示“未找到！” （App.js中的备用路由）

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import Register from './account/register'
import Login from './account/login'

class Home extends React.Component {
    render() {
        return (
            <div>
                <div>
                    This is the home page...<br/>
                    <Link to='/home/login'>Login</Link><br />
                    <Link to='/home/register'>Register</Link><br />
                </div>
                <Switch>
                    <Route path='/home/login' component={Login} />
                    <Route path='/home/register' component={Register} />
                </Switch>
            </div>
        );
    }
}

export default Home;

登录和注册非常相似：

import React from 'react';

class Login extends React.Component {
    render() {
        alert("login");
        return (
            <div>Login goes here...</div>
        );
    }
}

export default Login;

而且无法弄清楚为什么找不到登录和注册。我也尝试将路线定义为：

<Link to={`${match.path}/register`}>Register</Link>
...
<Route path={`${match.path}/register`} component={Register} />

（看不到使用match的收益，因为它呈现为预期的“ / home / register”），但是问题仍然以相同的方式存在