リアクタがリアクタでレンダリングされていない

Question

そのルートをたどった後にレンダリングしないコンポーネントに何らかの問題があります。ルートは親コンポーネントDrawingsで作成され、Drawingコンポーネントにいくつかの小道具を送信します。

リンクをクリックすると、適切なパス（例：/drawing/20170724）が取得され、render機能のログステートメントが実行されます。私も小道具を手に入れました。しかし、リターンは起こらないので、必要なHTMLは利用できません。

import React, { Component } from "react"; 
import { Route, Link } from "react-router-dom"; 
import AnimatedWrapper from "../modules/AnimatedWrapper"; 

import Drawing from '../components/Drawing'; 

class DrawingsComponent extends Component { 
    render() { 
    const drawings = this.props.drawings; 
    const drawingsMap = this.props.drawingsMap; 

    return(
     <div> 
     <div className="page"> 
      <div className="drawings-list"> 
      { 
       drawings.map((drawing) => { 
       return(
       <Link to={`/drawing/${drawing.date}`} key={drawing.date}> 
        <div className="drawing-thumb"> 
        <h2>{drawing.date}</h2> 
        </div> 
       </Link> 
       ) 
       }) 
      } 
      </div> 
      { 
      Object.keys(drawingsMap).map((d, i) => { 
      return <Route path={`/drawing/${drawings[i].date}`} render={(props) => (<Drawing drawingPkg={drawingsMap[d]} drawingInfo={drawings[i]} {...props} />)} key={`${drawings[i].date}`}/> 
      })} 
     </div> 
     </div> 
    ) 
    } 
} 

const Drawings = AnimatedWrapper(DrawingsComponent); 
export default Drawings; 

そして、ここではDrawing次のとおりです：

import React, { Component } from 'react'; 
import AnimatedWrapper from "../modules/AnimatedWrapper"; 

class DrawingComponent extends Component { 
    render() { 
     const drawing = this.props.drawingPkg; 
     const drawingInfo = this.props.drawingInfo; 

     console.log('gonna draw now'); 

     return(
      <div className="drawing"> 
       <h2 className="drawing-title">{drawingInfo.title}</h2> 
       <canvas></canvas> 
      </div> 
     ) 
    } 
} 

const Drawing = AnimatedWrapper(DrawingComponent); 
export default Drawing; 

描画コンポーネントが戻っていない理由を私は理解することはできません。ここ

はルートとのリンクが作成されているDrawingsです。

Answer 1

あなたがしていることは間違っています。リンクをクリックすると、URLが変更されます。次に、経路の設定を行う必要があります。これは、URLが変化したときにどのコンポーネントをレンダリングするかをルータに指示します。それはあなたのファイルの中にこのようなものでなければなりません。

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'react-redux'; 
import { createStore, applyMiddleware } from 'redux'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import promise from 'redux-promise'; 

import reducers from './reducers'; 
import Drawing './components/drawing_component'; 


const createStoreWithMiddleware = applyMiddleware(promise)(createStore); 

ReactDOM.render(
    <Provider store={createStoreWithMiddleware(reducers)}> 
    <BrowserRouter> 
     <div> 
     <Switch> 
      <Route path="/drawings/:date" component={Drawing} /> 
      <Route path="/" component={IndexComponent} /> 
     </Switch> 
     </div> 
    </BrowserRouter> 
    </Provider> 
    , document.querySelector('.container')); 

ここで間違っているのはルート設定です。私はあなたのやり方のようにルート設定が与えられたことは一度も見たことがありません。

次に、drawingインスタンスをレンダリングする別のDrawingコンポーネントを作成します。

この変更により、リンクはこのようになります。

<Link to={`/drawing/${drawing.date}`}> 
    {drawing.date} 
</Link> 

最終結果はこれです。ここで、ハイパーリンク付きのテキストをいくつか与えます。このルーターをクリックすると、今の場合のようにURLが変更されます。次に、ルータ構成を使用して関連するコンポーネントをレンダリングします。

これが役に立ちます。ハッピーコーディング！