2017-10-12 20 views
0

BrowserRouterをコンポーネントから移動しようとしました。私のアプリケーションは次のようになりました:react-router-domのBrowserRouterはコンポーネントをレンダリングしません。

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    } 
    } 

    render() { 
    return (
      <BrowserRouter> 
      <main> 
       <Menu /> 
       <Switch> 
       <Route exact path="/about" component = {About} /> 
       <Route exact path="/admin" component = {BooksForm} /> 
       <Route exact path="/cart" component = {Cart} /> 
       <Route exact path="/" component = {BookList} /> 
       </Switch> 
       <Footer /> 
      </main> 
      </BrowserRouter> 
    ); 
    } 
} 

すべてうまくいきました。しかし、私がBrowserRouterを引き上げると、index.jsは次のようになります。

const renderApp =() => (
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <App/> 
    </BrowserRouter> 
    </Provider> 
) 

const root = document.getElementById('app') 
render(renderApp(), root) 

これは動作を停止しました。リンクの1つをクリックすると、URLが変わりますが、アプリに変更はありません。私はページをリロードするときだけ、新しいコンポーネントをレンダリングします。 Switchと同じコンポーネントにルータコンポーネントを置かずに、どのように動作させることができますか?

答えて

0

コードの残りの部分を見ずに言うのは難しいです。あなたは適切な反応ルータ<Link>を使用していますか?私はあなたが両方のコンポーネントに<BrowserRouter>要素を持っていないと仮定して、それらを入れ子にすると良いことはないと想像できません。

は私が反応し、ルータの古いバージョンにはので、私は初めて、これらの例のいくつかを見ているが、あなたは<Switch>内のもの<Route> Sのすべてのexactキーワードを必要としないように見えます - スイッチは、そのうちの1つだけが数学を保証する。

0

もう一度やり直しました。 reduxからの接続が問題を引き起こし、withRouterが解決しました

関連する問題