React-router-dom v4 嵌套路由不起作用 [英] React-router-dom v4 nested routes not working

问题描述

关于未解决的问题(作为最终结论)

• react-router-dom v4 中的多个嵌套路由
• 如何在 React Router v4 中嵌套路由?

我也遇到了同样的问题.

https://reacttraining.com/react-router/web/guides/quick-start 推广 react-router-dom

此外，人们发现在一个文件中而不是在组件内部列出路由更好.

引用内容: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

一些工作(大部分):

import * as React from 'react'从react-router-dom"导入{BrowserRouter 作为路由器、路由、交换机}导出常量路由 = () =>(<路由器><div><开关><路由精确路径=/登录"组件={登录}/><MainApp path="/"><Route path="/list" component={List}/><Route path="/settings" component={Settings}/></主应用程序><Route path="*" component={PageNotFound}/></开关>

</路由器>)

出现问题:site.com/SomeGarbagePath 显示了 我认为.
<Route path="*" component={PageNotFound}/>

更新

/- Home - 所有(几乎)的父级/List - 在家里/设置 - 在家里/登录 - 独立/用户 - 在家里，现在只是展示自己.它还有更多的页面./User/123 - 使用/:id 的内部用户/User/staticUser - 使用静态路由的内部用户/garbage - 未定义路由(未按预期工作)

解决方案

这是完成您所描述的操作的一种方式(请注意，还有其他方法可以直接在您的 React 组件中处理布局).为了使示例保持简单，其他组件(、 等)被创建为没有属性或状态的纯函数组件，但将每个组件放在一个在它自己的文件中作为一个合适的 React 组件.下面的示例已完成并可以运行.

import React, { Component } from 'react';import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';类 App 扩展组件 {使成为() {const 标题 = () =><h1>我的标题</h1>;const 页脚 = () =><h2>我的页脚</h2>;const 登录 = () =><p>登录组件</p>;const Home = () =><p>主页</p>;const List = () =><p>列表页面</p>;const 设置 = () =><p>设置页面</p>;const PageNotFound = () =><h1>呃哦，没找到！</h1>;const RouteWithLayout = ({ component, ...rest }) =>{返回 (<div><标题/><Route {...rest} render={ () =>React.createElement(component) }/><页脚/>

);};返回 (<路由器><div><开关><路由精确路径="/login" component={Login}/><RouteWithLayout 精确路径="/" component={Home}/><RouteWithLayout path="/list" component={List}/><RouteWithLayout path="/settings" component={Settings}/><Route path="*" component={PageNotFound}/></开关>

</路由器>);}}导出默认应用程序；

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

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

In reference to the unresolved question (as a final conclusion)

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

I am also getting the same issue.

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

Also, people find better to list down routes in one file rather inside components.

Something referred: https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config

Something working (mostly):

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>
)

Something not working: site.com/SomeGarbagePath shows the <MainApp> I think.
<Route path="*" component={PageNotFound}/>

Update

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

解决方案

This is one way of doing what you described (note there are other ways of handling layouts directly in your React Components). In order to keep the example simple, the other components (<Home>, <List> etc.) are created as purely functional components with no properties or state but it would be trivial to put each one in its own file as a proper React component. The example below is complete and will run.

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;

This will do the following, which is hopefully what is now described in your question:

1. /login has no header or footer.
2. /, /list, and /settings all have the header and footer.
3. Any route that is not found will display the PageNotFound component, with no header or footer.

这篇关于React-router-dom v4 嵌套路由不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！