Question

我有两个完全相互独立的组件。我想在进入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并呈现App和About组件？

@edit

假设我的“关于”组件已损坏，我删除了第一个Route并仅保留/about（仅保留/about路径）：

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

（我在之前的测试中尝试保持关注）并将/about更改为about和/#/about。

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

“VM3651 bundle.js：30801警告：[react-router]位置”/＃/ about“与任何路线都不匹配”

@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正在呈现：

＆GT;关于＆gt;应用

所以它呈现的是IndexRoute，它不会被/about捕获。

现在这正是我所需要的，因为我不想要根组件，我想要2条路由到2个不同的隔离组件。我需要两条兄弟路线。

@edit

关于.js

import React, { Component } from 'react';

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

export default About;

解决方案：

由于我在网址中使用了HASH（＃），因此我应该使用hashHistory

中的React路由器中的<Router history={hashHistory}>

Answer 1

您对路线的工作方式感到困惑 - About是App路线的子项，因此为了呈现About，必须呈现App。

换句话说，您的App组件是“shell”，其下的所有组件都在其内部呈现（通过props.children）。

您应该添加另一条路线来渲染/。

import { ..., IndexRoute } from 'react-router'

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

您的App不包含特定于路线的内容，它会更像是这样：

<div id="app">
  <nav>app navigation</nav>
  <main class="route-content">{props.children}</main>
</div>

文档：https://github.com/ReactTraining/react-router/blob/master/docs/guides/RouteConfiguration.md#adding-an-index

Answer 2

这些路线对我来说是正确的。你在控制台中收到任何错误吗？也许您的About组件未定义，因此无法呈现。你可以发布你的About组件吗？

无法使React-Router渲染两个不同的组件，总是渲染root

2 个答案: