Javascript 未找到React路由器v5嵌套路由

我在尝试运行简单的设置时遇到问题。我之所以使用“react router dom”，是因为它声称是世界上记录最多的路由器。 不幸的是，文档示例使用的是函数而不是类，我认为运行中的示例不会解释路由是如何从以前的版本更改的。。。你需要一个好视力！。顺便说一句，版本之间有很多突破性的变化

我需要以下组件结构：

• 家
  • 登录
  • 登记册
• 食谱
• 配料

具有以下组件：

index.js（工作正常）

从“React”导入React；
从“react dom”导入react dom；
从“react router dom”导入{BrowserRouter，Route}；
从“./App”导入应用程序；
ReactDOM.render((
)，document.getElementById（'root'）；

App.js（罚款）

从“React”导入React；
从“react router dom”导入{Route，Switch}；
从“./主页”导入主页
从“./Recipes/Recipes”导入配方
从“./配料/配料”导入配料
类应用程序扩展了React.Component{
render（）{
返回(
找不到！}/>
);
}
}
出口违约亚努卡普；

成分和配方成分很好用，所以我从这里跳过

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

从“React”导入React；
从“react router dom”导入{交换机、路由、链接}；
从“./account/Register”导入注册表
从“./account/Login”导入登录名
类Home扩展了React.Component{
render（）{
返回(
这是主页…

登录

注册

);
}
}
导出默认主页；

登录和注册非常相似：

import React from 'react';

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

export default Login;

从“React”导入React；
类登录扩展了React.Component{
render（）{
警报（“登录”）；
返回(
登录到这里。。。
);
}
}
导出默认登录；

无法理解为什么找不到登录和注册。我还尝试将路线定义为：

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

寄存器
...

---

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

我认为这是因为回家路线上的

确切的

标志。它与/home-exact不匹配，因此会转到默认的未找到页面。

尝试在App.js中添加此内容
   try to add this in App.js


<Switch>
                <Route exact path='/' component={Home} />
                <Route path='/recipes' component={Recipes} />
                <Route path='/ingredients' component={Ingredients} />
                <Route path='/login' component={Login} />
                <Route path='/register' component={Register} />
                <Route render={() => <h1>Not found!</h1>} />
            </Switch>

找不到！}/>

这就是工作

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

寄存器
...

您应该提供match作为道具，因为cont直接访问match来使用它。您应该提供如下匹配

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

const namepage=（{match}）=>{
登记
...
})

非常感谢。我不知道我试过多少种带“精确”和不带“精确”的组合。结果总是一样的。但这一次，一些因素的组合似乎有所不同。。。它工作了，因为它找不到/home路由，也找不到登录和注册路由，因为这些路由都位于您的home组件中。现在就知道了

   try to add this in App.js


<Switch>
                <Route exact path='/' component={Home} />
                <Route path='/recipes' component={Recipes} />
                <Route path='/ingredients' component={Ingredients} />
                <Route path='/login' component={Login} />
                <Route path='/register' component={Register} />
                <Route render={() => <h1>Not found!</h1>} />
            </Switch>

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

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