React Router v5嵌套路由未找到。

Question

我在尝试运行一个简单的设置时遇到了问题。我使用了“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;

Ingredients组件和Recipes组件正常工作，因此我将从这里跳过

Home.js - 问题从这里开始。 Home本身加载正确，但是一旦点击登录或注册链接，它会显示“未找到！”（在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”相同，但问题仍然存在。

- zameb

Answer 1

我认为这是因为在主页的路由中使用了exact标志。它不匹配 /home，所以会跳转到默认的未找到页面。

- Raoul

---

非常感谢。我不知道我尝试了多少带有或不带有“exact”的组合。结果总是一样的。但这一次，某些因素的混合似乎不同……它奏效了。 - zameb

因为它找不到 /home 路由，所以也找不到登录和注册路由，因为它们位于您的 home 组件中。 - Raoul

现在都有感觉了。 - zameb

Answer 2

   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 作为 props 提供，因为 cont 无法直接访问 match 以使用它，你可以按照以下方式提供 match

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

- Mohammed Al-Reai