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内容，但当我导航到已建立的路径时，应用程序不会显示任何内容，只是一个空洞{{1}}，不明白为什么......

快速注释：<section>的第一次渲染完美呈现补充工具栏和与第一条路线相关的Home。

以下是获取组件的导航：

Dashboard

修改通过petiton，仪表板组件：

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 />}对象显式传递给Dashboard。

每个案例都是相同的，NavLink将我带到指示路线，并且它什么都不呈现（一个空白部分元素）。

奇怪的情况是，即使我做了location而不是/videos这样的普通路由，路由器仍然不做任何渲染。我认为这可能是经过验证的路线的问题，但对我来说没有任何意义。

Answer 1

在应用

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

在家里

<input name="formAction:proxima" title=">" disabled="disabled" class="button" id="FormAction:proxima" type="submite" value=">">

需要使用渲染道具。

Answer 2

好吧，我修复了问题，它是在Home路由的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不显示组件

更新

2 个答案: