Reactjs react路由器4中IndexRoute的备选方案

我正在学习一门课程，作者在react中使用

react router

Version3编写了一些路由代码

<Router history={browserHistory} >
  <Route path="/" component={Main}>
      <IndexRoute component={PhotoGrid}></IndexRoute>
      <Route path="/view/:postId" component={Single}>
   </Route>
</Router>

我的组件是：

class Main extends React.Component {
  render() {
    return (
        <div>
          <h1>
            <Link to="/">Reduxtagram</Link>
          </h1>
          {React.cloneElement(this.props.children, this.props)}
        </div>           
    );
  }
}

class PhotoGrid extends React.Component {
  render() {
    return <div className="photo-grid">PhotoGrid</div>;
  }
}

class Single extends React.Component {
  render() {
    return <div className="single-photo">Single</div>;
  }
}

类主扩展React.Component{
render（）{
返回(
雷德克斯塔格拉姆
{React.cloneElement（this.props.children，this.props）}
);
}
}
类PhotoGrid扩展了React.Component{
render（）{
返回光栅；
}
}
类扩展了React.Component{
render（）{
返回单；
}
}

开关

组件将仅呈现匹配的第一条
路线

您可以将
Main
组件用作常规组件，并将
开关
用作
子组件

<BrowserRouter>
  <Main>
    <Switch>
      <Route exact path="/" component={PhotoGrid} />
      <Route path="/view/:postId" component={Single} />
    </Switch>
  </Main>
</BrowserRouter>

我知道这是一个老问题，但我遵循同样的路线，我决定更新所有库，基本上我必须像这样重新构建应用程序：

reduxtagram.js：

import React from 'react';
import {render} from 'react-dom';
import App from './components/App';
import {Provider} from 'react-redux';
import store from './store';
// import css
import css from './styles/style.styl';

// import react router deps

const router = (
    <Provider store={store}>
      <App/>
    </Provider>
)

render(router , document.getElementById('root'));

从“React”导入React；
从'react dom'导入{render}；
从“./components/App”导入应用程序；
从'react redux'导入{Provider}；
从“./store”导入存储；
//导入css
从“./styles/style.styl”导入css；
//导入路由器deps
常数路由器=(
)
render（router，document.getElementById（'root'））；

main.js：

import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import PhotoGrid from './PhotoGrid';
import Single from './Single';
import {Router, Route} from 'react-router-dom';
import {history} from '../store';

export default class Main extends Component {
render() {
    return (
        <div>
            <Router history={history}>
                <Route
                path="/"
                render={(routeProps) => (
                    <h1>
                        <Link to='/'>Reduxstagram </Link>
                    </h1>
                )}/>

                <Route
                path="/grid"
                render={(routeProps) => (
                    <PhotoGrid {...routeProps} {...this.props} />
                )}/>

                <Route
                path="/grid/view/:postID"
                render={(routeProps) => (
                    <Single {...routeProps} {...this.props} />
                )}/>

            </Router>
        </div>
    )
    }
}

import React，{Component}来自'React'；
从'react router dom'导入{Link}；
从“./PhotoGrid”导入PhotoGrid；
从“./Single”导入单个；
从“react Router dom”导入{Router，Route}；
从“../store”导入{history}；
导出默认类主扩展组件{
render（）{
返回(
(
雷多克斯泰格拉姆
)}/>
(
)}/>
(
)}/>
)
}
}
我使用了
开关
来避免此错误
A可能只有一个子元素
。从你的代码来看，我再次面临这个错误。我认为我们需要将
BrowserRouter
中的所有组件/路由嵌套在一个标记中。使用此代码，
Main
和
PhotoGrid
位于相邻组件处。要求是，
PhotoGrid
应该是
Main
的子组件。另外，当我将url更改为
/view/1234
时，
单个
组件不会被渲染。@coder我更新了答案
path=“/view/：postId”
仍将匹配
/view/1234
未添加子组件的
主
组件中缺少
{React.cloneElement（this.props.children，this.props）}
。这也增加了问题的难度。谢谢你的帮助
import React, { Component } from 'react';
import {Link} from 'react-router-dom';
import PhotoGrid from './PhotoGrid';
import Single from './Single';
import {Router, Route} from 'react-router-dom';
import {history} from '../store';

export default class Main extends Component {
render() {
    return (
        <div>
            <Router history={history}>
                <Route
                path="/"
                render={(routeProps) => (
                    <h1>
                        <Link to='/'>Reduxstagram </Link>
                    </h1>
                )}/>

                <Route
                path="/grid"
                render={(routeProps) => (
                    <PhotoGrid {...routeProps} {...this.props} />
                )}/>

                <Route
                path="/grid/view/:postID"
                render={(routeProps) => (
                    <Single {...routeProps} {...this.props} />
                )}/>

            </Router>
        </div>
    )
    }
}