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;

成分和配方组件工作正常，所以我将从这里跳过

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”），但问题仍然以相同的方式存在

Answer 1

我认为这是因为回家路线上的exact标志。它与/ home完全不匹配，因此转到默认的“未找到”页面。

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} />

您应该提供匹配项作为道具，因为要继续直接访问要使用的匹配项，您应该提供以下匹配项

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

找不到React Router v5嵌套路由

2 个答案: