Question

我是React Router的新手，并且很难理解为什么我的实现无效。在DevTools中，似乎创建了嵌套路由，但是当我单击应加载它的链接时，整个页面将重新呈现为空白。我猜测链接的URL与路径的路径不匹配（虽然从屏幕截图中可以看出它们是相同的），或者可能是路径从未实际注册并测试过匹配？

Screenshot of React output in Chrome Dev Tools

我在ReportContainer组件的渲染中放置了一个断点，但它从来没有使用它。

应用

import React, { Component } from 'react';
import { connect } from 'react-redux'

import mainLayout from '../layouts/main';
import Report from './Report.jsx';

const routes = [
  {
    label: 'Reports',
    subs: {
      links: [
        {
          label: 'Report 1',
          link: '/app/reports/report1',
        }
      ],
      paths: [
        {
          path: '/app/reports/report1',
          component: Report
        }
      ]
    }
  }
];

export class AppContainer extends Component {

  render() {

    return (
        React.createElement(mainLayout, { routes })
    );
  }
}
export default connect(null, null)(AppContainer)

App.jsx

import React from 'react'
import { Route } from 'react-router-dom';

import AppMenuBar from '../components/AppMenuBar';
import Report from '../components/Report.jsx';

const MainForm = ({ routes }) => (
  <div>
      <AppMenuBar screen="app/main" routes={routes} />
      <div style={{ marginLeft: '250px' }}>
        <h1>Main Page</h1>
        <p> Default page for the /app location.</p>

        <Route 
          path='/app/reports/report1'
          key='r1'
          component={Report}
        />
      </div>
  </div>
)

export default MainForm

主要布局

我在这里硬编码了Route，而不是在路由对象中动态构建它，以防出现问题。

{{1}}

Screenshot of my rendered App component。这与React dev工具输出相对应。单击报告1菜单项yields this，即更新的URL但屏幕为空白。快速查看React输出显示根本没有渲染组件，只有来自App.js的空路径。

嵌套路线是否应该在这种情况下不起作用而且我误解了它们应该如何工作？ BrowserRouter是否不知道嵌套路由，因此无法进行匹配，默认为null组件？我发现的所有示例都没有跨越多个文件的嵌套路由（尽管它们显然使用了多个组件）。想知道我的实施中是否有遗漏的东西。

如果我应该引用这种模式的已知好例子，我会很感激指向正确的方向。谢谢！

Answer 1

从父路径中删除exact。

如果您只是内联编写内容，很容易看到发生了什么：

<Route exact path="/foo" component={props => {
  // this component will only load if the url is *exactly* /foo
  // it doesn't matter if you have nested routes in here or not
  // because they will never be rendered if the url is not exactly /foo

  return <Route path="/foo/bar" component={FooBar} /> // <-- can't possibly work
}} />

将其与：

进行比较

<Route path="/foo" component={props => {
  // will always render if *containing* /foo (ie. /foo or /foo/bar)

  // now this nested path will at least be rendered when url is /foo/bar
  return <Route path="/foo/bar" component={FooBar} />
}} />

React-Router v4嵌套路由不匹配

1 个答案: