React组件未使用React路由器进行呈现

Question

我在组件跟随其路由后未呈现组件时遇到了一些问题。路线在父组件Drawings中创建，并向Drawing组件发送一些道具。

当我点击链接时，我得到正确的路径，例如，/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; 

我想不通为什么绘图组件没有返回。

Answer 1

你在做什么是错的。点击链接时更改网址。然后你必须给路由配置，告诉反应路由器在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> 

底线是这样的。在这里你给一些超链接的文字。点击这个路由器就会像现在一样改变网址。然后它使用路由器配置来呈现相关组件。

希望这会有所帮助。快乐的编码！