リアクタ・ルータはどのルートとも一致しません

私はreact-routerでいくつかの基本的な例を作ろうとしていますが、うまくいきません。コードやアイデアが最も単純です：リアクタ・ルータはどのルートとも一致しません

import React, { Component } from 'react'; 
import { Router, Route, browserHistory, IndexRoute } from 'react-router'; 
import App from './App'; 
import About from './About'; 
import Repos from './Repos'; 
// import NotMatch from './NotMatch'; 

export default class RouterApp extends Router { 
    render() { 
    return (
     <Router history={ browserHistory }> 
     <Route path='/' component={ App } > 
      <IndexRoute component={ Repos } /> 
      <Route path='about' component={ About } /> 
     </Route> 
     </Router> 
    ); 
    } 
}

それはAppコンポーネントを描画するが、他のルートがhttp://localhost:8080/#/about?_k=nwt0sqのような作品を、そのルートスローの私をしません：Location "/about" did not match any routes。

Reposルート（indexRoute）も機能しません。

ところで、これはindex.jsです：

import React from 'react' 
import { render } from 'react-dom' 
import RouterApp from './modules/Router' 

render(<RouterApp/>, document.getElementById('app'))

任意のアイデア？私は別の質問を読んで、グーグルで回っていましたが、これを解決することはできません。

ここにある私のコンポーネント：

App.js

import React, { Component } from 'react'; 

export default class App extends Component { 
    render() { 
     return <h1> APP </h1>; 
    } 
}

Repos.js

import React, { Component } from 'react'; 

export default class Repos extends Component { 
    render() { 
     return (
      <section> 
       <h2>Repos</h2> 
       <ul> 
        <li>Repo 1</li> 
        <li>Repo 2</li> 
        <li>Repo 3</li> 
        <li>Repo 4</li> 
       </ul> 
      </section> 
     ); 
    } 
}

About.js

import React, { Component } from 'react'; 

export default class About extends Component { 
    render() { 
     return (
      <section> 
       <h2>About</h2> 
       <p> 
        Pariatur eum tenetur in iste maiores est architecto dignissimos. 
        Vero non explicabo veniam quam debitis. 
        Deleniti rerum eaque ratione provident delectus architecto veniam. 
        Ipsum omnis dicta eum dolore ea. 
       </p> 
      </section> 
     ); 
    } 
}

出典

2016-12-21 Nano

私はここではオフになるかもしれませんが、あなたのルータはpush-stateヒストリ（属性history = {browserHistory}によって）を使用していますが、例としてリストされたURLはハッシュベースのルーティング（/＃/ about）を使用しています。それは正しく動作しない可能性があります。手動でaboutページに移動する場合は、ハッシュなしで実行してください。また、パスを開いたときにハッシュが自動的に設定されるため、いずれのクエリ文字列パラメータも追加しないでください。 –

@PaulStoner weird。編集：私はhashHistoryに変更しましたが、問題はまだあります。 – Nano

私の謝罪は、その後です。私は、同様の見た目のルータIセットアップに基づいてそのコメントをしていました。ルートにハッシュを追加すると、自分のaboutページに手動で移動したときにブラウザが遷移しなくなりました。私は他に何かを見つけることができるかどうかを見てみる –

私は私はあなたの間違いだと思います、あなたのルートは作動しません

render() { 
    return (
     <Router history={ browserHistory }> 
     <Route path='/' component={ App } > 
      <IndexRoute component={ Repos } /> 
      <Route path='/about' component={ About } /> 
     </Route> 
     </Router> 
    ); 
    }

出典

2016-12-21 19:19:56 Codesingh

子ルートには後続のスラッシュが必要ではないので、試してみて同じエラーが出る：/ – Nano

"/ "それは世話をする。私の限られた経験では、ルート自体は先頭の "/"を必要としません –

あなたの基本コンポーネントで子どもの小道具を返すか – Codesingh

は、次のようにあなたのapp.jsをリファクタリングしてみてください。

export default class App extends Component { 
    render() { 
     return (<div> (this.props.children} </div>): 
    } 
}

あなたがメインにルートを伝承する必要があります - ：味方このようなパスごとにスラッシュを配置する必要がありpath.youを指定しますアプリコンポーネント。

出典

2016-12-21 19:41:27

リアクタ・ルータはどのルートとも一致しません

答えて

関連する問題