React組件未使用React路由器進行呈現

我在組件跟隨其路由後未呈現組件時遇到了一些問題。路線在父組件Drawings中創建，並向Drawing組件發送一些道具。React組件未使用React路由器進行呈現

當我點擊鏈接時，我得到正確的路徑，例如，/drawing/20170724，我在render函數中運行的日誌語句。我也獲得了道具，迄今爲止非常好。但是，返回不會發生，所以我需要的HTML不可用。

這裏是Drawings，其中路線和鏈接的創建：

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;

我想不通爲什麼繪圖組件沒有返回。

來源

2017-08-01 alightedlamp

控制檯錯誤將幫助他人更快地瞭解您的情況？請幫忙提供。 – thelonglqd

我很抱歉，沒有控制檯錯誤 - 一切似乎運行良好。我在控制檯中點擊鏈接和'DrawingComponent'日誌'現在繪製'的日誌語句，但是返回語句永遠不會運行，因爲應該返回的HTML不存在於DOM中。 – alightedlamp

你在做什麼是錯的。點擊鏈接時更改網址。然後你必須給路由配置，告訴反應路由器在URL改變時呈現哪個組件。在index.js文件中應該是這樣的。

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>

底線是這樣的。在這裏你給一些超鏈接的文字。點擊這個路由器就會像現在一樣改變網址。然後它使用路由器配置來呈現相關組件。

希望這會有所幫助。快樂的編碼！

來源

2017-08-01 03:39:47

謝謝！這有助於工作，現在組織得更好。 :) – alightedlamp

React組件未使用React路由器進行呈現

回答

相關問題