我有这两个完全独立的组件。我想在输入 / 时呈现 App ，在转到 /#/about 时呈现 About 。

我得到了这段代码（但我测试了不少其他代码）：

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router'
import App from './App';
import About from './About';

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path="/" component={App} >
      <Route path="/about" component={About} />
    </Route>
  </Router>
  , document.getElementById('root')
);

我也尝试了类似

<Route path="/about" component={About} />
<Route path="/" component={App} />

并将 /about 更改为 /#/about 、 about

但它总是呈现“后备” / ，无论如何它总是走这条路线。

我如何让此应用正确导航到 / 和 /about 并呈现 App 和 About 组件？

@edit

假设我的 About 组件损坏，我删除了第一个 Route 并仅保留了 /about （仅保留了 /about 路由）：

<Route path="/about" component={App} />

（我在之前的测试中也尝试保留 About）并将 /about 更改为 about 和 /#/about 。

我在控制台上收到此错误：

"VM3651 bundle.js:30801 Warning: [react-router] Location "/#/about" did not match any routes"

@edit 2

我按照 @Dominic 发布的示例进行了更改。我必须进行一些修改以确保两个组件都能呈现。我将 {this.props.children} 添加到所有组件以了解会发生什么。

//imports
ReactDOM.render(
<Router history={browserHistory}>
  <Route path="/" component={About} >
    <IndexRoute component={App} />
    <Route path="/about" component={Other} />
  </Route>
</Router>
,document.getElementById('root'));

路由 http://localhost:3000/#/about 正在呈现：

> About > App

因此它正在呈现 IndexRoute，它没有被 /about 捕获。

而这正是我现在所需要的，因为我不想要根组件，我想要 2 个路由到 2 个不同且独立的组件。我需要类似两个兄弟路线的东西。

@edit

About.js

import React, { Component } from 'react';

class About extends Component {
  render() {
    return (
      <div>
        About page
        {this.props.children}
      </div>
    );
  }
}

export default About;

解决方案：

由于我在 URL 中使用了 HASH (#)，因此我应该在 <Router history={hashHistory}>