React 路由器未显示组件

Question

var React = require('react'),
    ReactDOM = require('react-dom'),
    Router = require('react-router').Router,
    Route = require('react-router').Route,
    SiteLanding = require('./components/landing/SiteLanding'),
    KanbanBoard = require('./components/board/KanbanBoard'),
    Navigation = require('./components/navigation/Navigation'),
    bootstrap = require('bootstrap/dist/css/bootstrap.min.css'),
    fontAwesome = require('font-awesome/css/font-awesome.min.css');

class App extends React.Component{

    render(){
        return (
            <div className="landing-container">
                <Navigation />    //Not displayed
                {this.props.children}
            </div>
        );
    }

}

ReactDOM.render((
    <Router>
        <Route path="/" component={SiteLanding} />
        <Route path="/dashboard" component={KanbanBoard}/>
    </Router>), document.getElementById('root'));

module.exports = App;

使用react router后组件不显示（只显示SiteLanding组件）。当我尝试移除路由器并直接呈现 App 组件时，导航组件呈现正确。是不是我的路由配置有问题

Answer 1

您的 react-router 设置根本不会呈现您的 App 组件。它将直接在 '/' 处呈现 SiteLanding，在 '/dashboard' 处呈现 KanbanBoard。在这种情况下你想要的可能看起来更像这样：

ReactDOM.render((
    <Router>
        <Route path="/" component={App} />
          <IndexRoute component={SiteLanding} />
          <Route path="dashboard" component={KanbanBoard} />
        </Route>
    </Router>), document.getElementById('root'));

这样您就有了一个根组件 (App)，它在每个路径上呈现，传递给它的子组件具有可变性。确保在顶部导入 IndexRoute 组件才能正常工作。

我还建议添加某种 URL 历史管理功能 - 请参阅 https://github.com/reactjs/react-router/blob/latest/docs/Introduction.md 了解更多信息。

React 路由器未显示组件

React router not displayed a component

reactjs

react-router