2017-01-18 18 views
1

単純な1ページアプリケーションのルーティングを設定しようとしています。私が1ページを言うと、私はすべてのコンポーネントが一度にレンダリングされることを意味します。ルーティングの目的は、リンクをアンカーに使用することでした(navをクリックすると、正しいセクション/コンポーネントにスクロールできます)。反応ルータの設定

index.js

コンパイルエラー何もありませんがレンダリングされると、私は私のブラウザのコンソールで次のようになっています。

browser console

App.js updated

routes.js

私はそれが唯一のコンポーネントをレンダリングし、罰金働いていたとき、その最初の形に私のApp.jsを元に戻しました。代わりに、ルーティングを保持するroutes.jsファイルを作成しました。これが正しい場合、どのようにしてindex.jsでレンダリングすることができますか?それとも、これは物事がうまくいかないか?

+0

あなたはこれを見てみることができます:http://stackoverflow.com/questions/40280369/use-anchors-with-react-router – pinturic

+0

@pinturicこれはすでに働いている環境につながります。現時点では、ルーティングを使用してページをレンダリングしようとしています。その後、アンカーリンクの問題を調べます。 – Manu

答えて

3

Routerは、デフォルトのエクスポートではないreact-routerです。あなたはまた、render()方法からRouterを返すことになっていない

const Router = require('react-router').Router; 

:これは正しいが必要です。 <Router>ReactDOM.render()に直接渡す必要があります。

+0

ルートルートを使用する: '他のルートはここに、App.render():' return

{this.props.children}
'になります。このようなもので十分でしょう。 –

+0

私は最初の投稿を更新しました。 – Manu

+0

ReactDOM.render( {routes}、document.getElementById( 'app'))のようなものがありますか。私のindex.jsに? – Manu

関連する問題