react-router 4中IndexRoute的替代方法

时间:2018-08-04 16:53:39

标签: reactjs react-router-v4

我正在学习一门课程,作者使用onInstall(e)第3版编写了一些用于路由的代码。

react-router

在学习本课程(我正在使用<Router history={browserHistory} > <Route path="/" component={Main}> <IndexRoute component={PhotoGrid}></IndexRoute> <Route path="/view/:postId" component={Single}> </Route> </Router> 版本4的课程)时,我知道现在router不存在。我用谷歌搜索了替代方案,发现<IndexRoute>是替代方案。但是我不知道如何使用exact来满足此要求。作者希望exact组件始终位于DOM上,并且基于url,仅子组件应该更改(即MainSingle)。
我尝试了以下代码,这当然是错误的代码:

PhotoGrid

我的组件是:

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

2 个答案:

答案 0 :(得分:1)

Switch组件将仅呈现匹配的第一个Route

您可以将Main组件用作常规组件,并将Switch用作children

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

答案 1 :(得分:0)

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

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'));

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>
    )
    }
}