React-router-dom v4 嵌套路由不起作用

Posted 2023-02-21

【中文标题】React-router-dom v4 嵌套路由不起作用

【英文标题】：React-router-dom v4 nested routes not working

【发布时间】：2017-09-04 16:52:09

【问题描述】：

关于未解决的问题（作为最终结论）

Multiple Nested Routes in react-router-dom v4 How to nest routes in React Router v4?

我也遇到了同样的问题。

https://reacttraining.com/react-router/web/guides/quick-start提升react-router-dom

此外，人们发现list down routes 在一个文件中而不是在组件中更好。

提到的东西： https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

一些工作（大部分）：

import * as React from 'react'
import BrowserRouter as Router, Route, Switch  from 'react-router-dom'


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component=Login/>
        <MainApp path="/">
          <Route path="/list" component=List/>
          <Route path="/settings" component=Settings/>
        </MainApp>
        <Route path="*" component=PageNotFound/>
      </Switch>
    </div>
  </Router>
)

有些东西不工作： site.com/SomeGarbagePath 表示我认为的 <MainApp>。<Route path="*" component=PageNotFound/>

更新

/ - Home - parent of all (almost)
/List - inside home
/Settings - inside home
/Login - standalone
/Users - inside home, For now just showing itself. It has further pages.
/User/123 - inside user with /:id
/User/staticUser - inside user with static route
/garbage - not a route defined (not working as expected)

【问题讨论】：

不清楚你在问什么。请举例说明您的路线应该是什么，以及您希望路线的行为方式。

@ToddChaffee 登录页面是独立的。 / 想要在页眉和页脚之间呈现页眉、页脚和其他一些内容。内容基于路由器路径（例如，list 用于/list，settings 组件用于/settings。如果没有路由匹配，则为pageNotFound

@Masood - 你找到解决方案了吗？出于某种原因，下面的答案对我不起作用。

【参考方案1】：

这是执行您所描述的一种方式（请注意，还有其他方式可以直接在您的 React 组件中处理布局）。为了使示例简单，其他组件（<Home>, <List> 等）被创建为没有属性或状态的纯功能组件，但是将每个组件作为适当的 React 组件放在自己的文件中是微不足道的。下面的示例已完成并将运行。

import React,  Component  from 'react';
import  BrowserRouter as Router, Route, Switch  from 'react-router-dom';

class App extends Component 
  render() 

    const Header = () => <h1>My header</h1>;
    const Footer = () => <h2>My footer</h2>;
    const Login = () => <p>Login Component</p>;    
    const Home = () => <p>Home Page</p>;
    const List = () => <p>List Page</p>;
    const Settings = () => <p>Settings Page</p>;
    const PageNotFound = () => <h1>Uh oh, not found!</h1>;

    const RouteWithLayout = ( component, ...rest ) => 
      return (
        <div>
          <Header />
          <Route ...rest render= () => React.createElement(component)  />
          <Footer />
        </div>
      );
    ;

    return (
      <Router>
        <div>
          <Switch>
            <Route exact path="/login" component=Login />
            <RouteWithLayout exact path="/" component=Home />
            <RouteWithLayout path="/list" component=List />
            <RouteWithLayout path="/settings" component=Settings />
            <Route path="*" component=PageNotFound />
          </Switch>
        </div>
      </Router>    
    );
  


export default App;

这将执行以下操作，希望这就是您的问题中现在描述的内容：

/login 没有页眉或页脚。 /、/list 和 /settings 都有页眉和页脚。 任何未找到的路由都将显示PageNotFound 组件，没有页眉或页脚。

【讨论】：

Chafee，A) 我不希望 /login 拥有 Header。请让我知道什么适合我的用例。 B）我可能会或很多不会为少数组件而不是其他组件嵌套路由（如示例所示）

您的示例中没有嵌套路由，或者至少不清楚。您“嵌套”路由的方式是/login，然后是/login/list 和/login/settings。你真正想要的是什么？你的问题太不清楚了。如果您需要帮助，您需要在问题中提供更多示例。告诉我们为什么要嵌套路由。你想达到什么行为。如果你能告诉我们，也许我们可以提供帮助。

Todd Chaffee 我从来没有说过 /login/list。如果你观察到 A)react-router-dom v4，路由有组件。 B) 见<MainApp> 没有/login 路由。所以路线不是login/list，而是/list。这不是v3。更多细节：见update

Todd Chaffee，您的解决方案很有前途并且有效！但是我想要一些在单个文件上具有路由、嵌套并且仍然使用 react-router-dom-v4 方式的路由。到目前为止，我接受你的解决方案是最好的。非常感谢您的努力！

【参考方案2】：

说实话，我不完全确定你在问什么。我假设你正试图让你的“某些东西不起作用”的例子起作用。

类似的，

import * as React from 'react'
import BrowserRouter as Router, Route, Switch  from 'react-router-dom'


export const Routes = () => (
  <Router>
    <div>
      <Switch>
        <Route exact path="/login" component=Login/>
        <MainApp path="/">
          <Switch>
            <Route path="/list" component=List/>
            <Route path="/settings" component=Settings/>
          </Switch>
        </MainApp>
        <Route component=PageNotFound /> 
      </Switch>
    </div>
  </Router>
)

【讨论】：

感谢您的回复，但它不起作用。它在 MainApp 页面内显示错误页面（或根本不显示 放置变化）；当 garbabe 键入链接时。