2017-07-20 7 views
0

私は反応する初心者です。私はチュートリアルReact Tutorialに従ってサインアップフォームを作成していました。しかし、それは時代遅れです。ブラウザのリダイレクトを使用してリンクをクリックすると、サインアップ、ログイン、ホームページにリダイレクトしようとしています。子ルートにコンポーネントが添付されている場合、BrowserRouterの使用方法は?

const routes = { 
    component: Base, 
    childRoutes: [ 

    { 
     path: '/', 
     component: HomePage 
    }, 

    { 
     path: '/login', 
     component: LoginPage 
    }, 

    { 
     path: '/signup', 
     component: SignUpPage 
    } 

    ] 
}; 

のような定義済みのルートとしてのチュートリアルベースコンポーネントは、ナビゲーションバーをリンクで定義します。このルートはインデックスページにインポートされ、ブラウザの履歴とともに使用されます。ブラウザ履歴は、React Router v4のように古くなっています。私はブラウザルーターを使いたいと思っていましたが、子ルートに付属のコンポーネントをどのように提供するのか分かりません。

私は

const routes = <Route component = {Base}> 
    <Switch> 
     <Route path="/" component={HomePage}/> 
     <Route path ="/login" component = {LoginPage}/> 
     <Route path ="/signup" component = {SignUpPage}/> 
    </Switch>  
</Route>; 

Routes.jsx

Index.jsx

import { BrowserRouter as Router,Route } from 'react-router-dom'; 

ReactDOM.render((
    <MuiThemeProvider muiTheme={getMuiTheme()}> 
    <Router>{routes}</Router> 
    </MuiThemeProvider>), 
     document.getElementById('root') 
); 

を試みたが、予想通り、私はそれがエラーを投げた、これは動作しないだろうと最初から知っていたし、 。 You should not use <Route component> and <Route children> in the same route; <Route children> will be ignoredおよび失敗した小道具タイプ:The prop子供is marked as required inベース, but its value isは未定義です。以前のバージョンのような子ルートについてはどこにも言及していないので、私は明らかです。私はこのReact training linkを調べてみましたが、ルートにコンポーネントを挿入する場所を見つけることができました。

助けていただければ幸いです。この質問には既に尋ねられていますが、反応ルータ4に関する多くのチュートリアルまたは適切なドキュメントが見つかりませんでした。申し訳ありません。

+0

を使うべきだと思います。子なしで 'Base'をレンダリングしています.RRv4では、ネストされたルートを持つべきではありません。 – Li357

+0

経路を動的に生成しますか? –

+0

お返事ありがとうございます。 @Melounek答えは私が探していたものでした – RBN

答えて

1

私はあなたが<Route component = {Base}>を消去し、私はあなたの質問を理解していない代わりに<Base>

+0

ありがとうございました。これは私が探していたものです – RBN

関連する問題