2

React は初めてで、シングル ページ アプリケーションを開発したいので、react-router 4 ルーティングを使用しています。

ルートを指定する main.js の下

import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './components/App';
import {Login} from './components/Login';
import {Home} from './components/Home';
import { history } from 'react-router';

React.render(
<Router history={history}>
    <Route path="/" component={App}>
        <Route path="home" component={Home}/>
        <Route path="login" component={Login}/>

    </Route>
</Router>,
document.getElementById('main')
);

そして App.js は、ご覧のとおり、ヘッダーとフッターを固定し、ルートに応じてページのコンテンツを動的に変更したいと考えています。

import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';

export class App extends React.Component {


render() {
    console.log(this.props.children);
    return (<div>
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}


}

このコードでは、パス ("/") を使用してアプリケーションが読み込まれると、リンク ホームをクリックしてホーム コンテンツを表示する必要がありますが、アプリケーションが最初に読み込まれると、デフォルトで表示されるようにしたいと考えています。

どうすればそれを達成できますか？

ありがとうございました！！

4

3 に答える 3

5

ここで React Router のドキュメントでIndexRoute説明されているように、おそらく を使用したいと思います。

ルーターは次のようになります。

<Router history={history}>
    <Route path="/" component={App}>
        <IndexRoute component={Home}/>
        <Route path="login" component={Login}/>
    </Route>
</Router>
于 2015-12-08T18:55:30.293 に答える
0

IndexRoute がネストされている場合に便利です。

<div>
    <Redirect from="/" to="home"/>
    <Route path="/" component={App}>
        <Route path="home" component={Home}>
            <IndexRoute component={IndexView} />
            <Route path="other" component={OtherView}></Route>
        </Route>
        <Route path="about" component={About}></Route>

    </Route>
</div>
于 2015-12-10T08:19:38.573 に答える