React router v4 Route 不显示组件

Question

阅读堆栈溢出和互联网，我无法找到解决似乎很容易解决的问题的解决方案，但是......我无法得到它。

问题很简单，<Route path={${match.path}/notas} component={Dashboard} /> 不渲染Dashboard 组件...为什么？不知道。

这是通用代码：

路线开始的索引：

const rootNode = document.getElementById('root')

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  rootNode
)

App 组件，主布局：

class App extends Component {
  
  componentWillMount() {
    const data = { loggedIn: false }
    sessionStorage.setItem('auth', JSON.stringify(data))
  }
  
  render() {
    return (
      <section>
        <Helmet>
          <meta charSet="utf-8" />
          <title>{APP_TITLE}</title>
        </Helmet>

        <Switch>
          <Route path="/" exact component={Login} />
          <ProtectedRoute path="/home" exact component={Home} />
        </Switch>
      </section>
    )
  }
}

还有 Home 组件：

const Home = ({match}) => {
  return <section className="home--grid">
    <Sidebar />
    <div className="home--grid">
      <Switch>
        <Route path={`${match.path}`} exact component={Dashboard} />
        <Route path={`${match.path}/videos`} component={Dashboard} />
        <Route path={`${match.path}/notas`} component={Dashboard} />
        <Redirect to={`${match.url}`} />
      </Switch>
    </div>
  </section>
}

就这么简单，没什么特别的...想法是Dashboard 将显示一些基于match.path 的json 内容，但是当我导航到已建立的路径时，应用程序不显示任何内容，只是一个空白<section>，不知道为什么……

快速说明：Home 的第一次渲染完美地渲染了侧边栏和与第一条路线相关的Dashboard。

这是到达组件的导航：

const Sidebar = () => {
  return <nav className="home--sidenav">
    <ul className="sidenav--items">
      <li>
        <NavLink to="/home">Total</NavLink>
      </li>
      <li>
        <NavLink to="/home/videos">Videos</NavLink>
      </li>
      <li>
        <NavLink to="/home/notas">Notas</NavLink>
      </li>
    </ul>
  </nav>
}

编辑 By petiton，仪表板组件：

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

class Dashboard extends Component {
  render() {
    return (
      <div>
        {this.props.match.path}
      </div>
    )
  }
}

const mapStateToProps = state => ({ dashboard: state.dashboard })
export default connect(mapStateToProps)(Dashboard)

是的，现在就这么简单吗……

更新

我一直在尝试，我的第一个想法是“更新阻止程序”，但是文档中的任何可能的修复都不起作用，将 Dashboard 组件包装到 withRouter 函数中，例如：

const WrappedDash = withRouter(Dashboard)

并将其传递到路由中，尝试使用

渲染子组件

render={() => <Dashboard />}

也不会在渲染方法中将 location 对象显式传递给 Dashboard。

每个案例都是一样的，NavLink 将我带到指定的路线，它什么也不渲染（一个空的部分元素）。

奇怪的情况是，即使我使用/videos 代替${match}/videos 之类的普通路由，路由器仍然不会渲染任何内容。我认为这可能是经过身份验证的路由的问题，但对我来说没有任何意义。

Answer 1

好吧，我解决了这个问题，它在 Home 路由的 exact 声明中，我期望正是 home 路由来呈现内容。

是的，这是一个非常愚蠢的细节，但它很重要：

    <Switch>
      <Route path="/" exact component={Login} />
      <ProtectedRoute path="/home" exact component={Home} />
    </Switch>

上面的代码不会渲染任何东西，/home 的组件和下面的代码（包含路由）会渲染所有东西：

    <Switch>
      <Route path="/" exact component={Login} />
      <ProtectedRoute path="/home" component={Home} />
    </Switch>

就这么简单，我很抱歉这个问题，但是如果你是第一次使用新工具，很难看出像这样的小细节。

Answer 2

应用内

 <Switch>
    <ProtectedRoute path="/home" exact render={ () => <Home/>} />
    <Route path="/" exact render={ () => <Login/>} />
  </Switch>

在家里

<Switch>
        <Route path={`${match.path}`} exact render={ () => <Dashboard/>} />
        <Route path={`${match.path}/videos`} render={ () => <Dashboard/>} />
        <Route path={`${match.path}/notas`} render={() => <Dashboard/>} />
        <Redirect to={`${match.url}`} />
 </Switch>

需要使用render prop。