別のファイルで反応経路を宣言してインポートする

Question

私は反応が新しいです別々のファイルで経路を宣言し、それをインデックスファイルで使用しようとしています。 ここに私のroutes.jsがあります。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Route 
} from 'react-router-dom'; 
import App from './components/App'; 
import Template1 from './components/template1'; 
import Template2 from './components/template2'; 
import Template3 from './components/template3'; 

const routes = (
      <Route exact path="/" component={App}> 
      <Route exact path="/sessionstate1" component={Template1}/> 
      <Route exact path="/sessionstate2" component={Template2}/> 
      <Route exact path="/sessionstate3" component={Template3}/> 
    </Route> 
) 

export default routes 

とindex.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { 
    BrowserRouter as Router, 
    Route,Redirect 
} from 'react-router-dom'; 
import './styles/css/index.css'; 
import routes from './routes.js'; 

ReactDOM.render(
     <Router history={browserHistory} routes={routes} />, 
     document.getElementById('root') 
     ); 

を私はすべてのエラーや警告を得ていないのですが、ページがロードされていません。私は おかげ

Answer 1

はこのよう

import React from "react"; 
import {HashRouter as Router, Route} from 'react-router-dom'; 
import NoteContainer from "./component/note/index.jsx"; 
import Header from "./component/common/header.jsx"; 

const App = (props) => { 
    return (
     <div className="container"> 
      <Header/> {props.children} 
     </div> 
    ); 
}; 

var x =() => { 
    return (
     <h1>Hello world!</h1> 
    ); 
}; 
module.exports =() => { 
    return (
     <Router> 
      <App> 
       <Route path="/" component={NoteContainer}/> 
       <Route path="/inbox" component={x}/> 
      </App> 
     </Router> 
    ); 
}; 

Answer 2

のように私は問題がdiv内Routeをラップしていると思い、それを試してみて行方不明です何を教えてください。 次のようにRouteの中にラッピングしてみてください。このfiddleを試して、ルートラッパーをdivに変更してください。

const routes=(
     <Route > 
     <Route exact path="/sessionstate1" component={Template1}/> 
     <Route exact path="/sessionstate2" component={Template2}/> 
     <Route exact path="/sessionstate3" component={Template3}/> 
     </Route > 
) 
export default routes; 

、あなたはdivの内側にあなたのルートをラップする必要はありませんindex.js

import routes from './routes.js'; 

ReactDOM.render(
    <Router history={browserHistory} routes={routes} />, 
    document.getElementById('root') 
); 

Answer 3

にインポートします。

routes.js

import React from 'react'; 
import { Router, Route } from 'react-router'; 
import { Template1, Template2, Template3 } from './templates'; 

const createRoutes =() => (
    <Router> 
     <Route exact path="/sessionstate1" component={Template1}/> 
     <Route exact path="/sessionstate2" component={Template2}/> 
     <Route exact path="/sessionstate3" component={Template3}/> 
    </Router> 
); 

export default createRoutes; 

index.js

import ReactDOM from 'react-dom'; 
import createRoutes from './routes'; 

const routes = createRoutes(); 

ReactDOM.render(
    routes, 
    document.getElementById('root') 
); 

Answer 4

index.js：

import LoginRoutes from './login/routes' 

let routeConfig = []; 
routeConfig = routeConfig.concat(LoginRoutes(store)); 

<Router routes={routeConfig}/> 

routes.js：

このような何かを試してみてください

export default (store) => { 

    return [ 
     {path: '/login', component: Login}, 
     {path: '/signup', component: SignUp}, 
    ] 
} 

このようにして、異なるファイルからルートを追加し、ルートのコンテキスト上の目的に役立つ別のフォルダにルート定義を広めることができます。

reduxを使用して、ルート上にonEnterイベントが必要な場合に備えて、ストア変数があります。例：

私は、onEnterイベントが、componentDidMount、data-fetching-wiseの良い代替手段であると判断します。ルートレベルでデータフェッチを呼び出すと、プレゼンテーションレベルの一部としてコンポーネントが表示されるので、私にとっては意味があります。

Answer 5

また、新しい問題に反応して実行していました。ここでは、私が試したものです（明らかに異なるコードと構造を、私たちが探しているものは、同じ機能する必要があります）

index.js

import React from "react"; 
import ReactDOM from "react-dom"; 
import { createHashHistory } from "history"; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import routes from "./routes"; 

const allRoutes = routes; 

ReactDOM.render(
    allRoutes, 
    document.getElementById("app") 
) 

とroutes.jsファイル。

import React from "react"; 
import { createHashHistory } from "history"; 
import { BrowserRouter, Route } from 'react-router-dom'; 

import App from "./pages/App"; 
import Detail from "./pages/Detail"; 
import List from "./pages/List"; 

const routes = (
    <BrowserRouter> 
    <div> 
     <Route exact path="/" component={ App } /> 
     <Route path="/" component={ List } /> 
     <Route path="/detail/:repo" component={ Detail } /> 
    </div> 
    </BrowserRouter> 
); 

export default routes; 

これが機能するかどうかを教えてください。