ReactJS路由器不路由

努力让React-Router为SPA工作，但我似乎无法让它呈现除App组件之外的任何东西。ReactJS路由器不路由

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Router, Route, Link, IndexRoute, browserHistory } from 'react-router'; 
import Parameter from './components/parameter/Parameter'; 

class App extends React.Component { 

    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
      </div> 
     ) 
    } 
} 

class Test extends React.Component { 
    render() { 
     return (
      <div className="container"> 
       <h1>TEST PAGE</h1> 
      </div> 
     ) 
    } 
} 

var routes = (
    <Route name="root" component={App} path="/"> 
     <Route component={Test} path="test" /> 
     <Route component={Parameter} path="parameter" /> 
    </Route> 
) 

ReactDOM.render((
    <Router history={browserHistory} routes={routes} /> 
), document.getElementById('react'))

来源

2017-02-15 greyfox

什么版本的react-router？ –

“react-router”：“^ 3.0.2” – greyfox

您是否尝试为'/ test'和'/ parameter'添加'/'？ –

你没有指定你想要的嵌套组件的App组件中呈现。 App组件的行为类似于所有嵌套路由的布局。

为特定路线命中时，您为嵌套路线指定的组件需要放置在布局/父组件内的位置。

最简单的方法是使用{this.props.children}App组件中的某个地方。参考下面的例子。

这里又是你的应用程序组件：

class App extends React.Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div className="container"> 
       <h1>TEST</h1> 
       <Link to="/parameter">Click Me!</Link> 
       {this.props.children} 
      </div> 
     ) 
    } 
}

为了更深入的例子，从反应路由器回购指active-links例子。在他们的示例中，您可以看到children作为App组件中的道具可用，并且会在命中相关路由时呈现嵌套路由中的任何其他组件。例如，点击/路由将呈现App内的Index组件，其中{children}被定位，因为存在直接嵌套的路由<IndexRoute ... />。

React提供this.props.children作为访问组件子项的方法。它允许您将组件作为数据传递给其他组件。在这种情况下，在App组件内渲染子组件。

来源

2017-02-16 09:12:00 jstwrt

如果您使用的阵营路由器V4，我觉得嵌套组件不渲染的原因是因为你可以在不窝<Route />小号阵营路由器V4。

我打开了一个问题，在这个早期：

How to nest routes in React Router v4?

来源

2017-02-15 22:45:11

我正在使用React Router 3 – greyfox

ReactJS路由器不路由

回答

相关问题