我在尝试进行简单的设置以运行时遇到问题。我使用了“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”），但问题仍然以相同的方式存在