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

以及主页组件：

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

编辑通过请求，仪表板组件：

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

在应用程序中

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

需要使用渲染道具

Answer 2

好吧，我解决了这个问题，它在 exact 主页路线的声明中，我期待的正是主页路线来呈现内容。

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

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

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

React router v4 Route 不显示组件

React router v4 Route doesn't display the component

javascript

reactjs

react-router-v4

更新