React 组件不使用 React Router 渲染

Question

我遇到了一个组件在遵循它的路线后不呈现的问题。路由在父组件 Drawings 中创建，并向 Drawing 组件发送几个道具。

当我单击 link 时，我到达了正确的路径，例如 /drawing/20170724，并且 render 函数中的日志语句运行。我也得到了道具，到目前为止一切顺利。然而，return并没有发生，所以我需要的HTML不可用。

这是 Drawings 创建路由和 link 的位置：

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;

我不明白为什么绘图组件没有 returning。

Answer 1

你的做法是错误的。单击 link 时，您更改了 URL。然后你必须给路由配置，告诉反应路由器当 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 应该是这样的。

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

底线是这样的。这里你给出了一些带有 hyperlink 的文本。单击此路由器后，URL 会像您现在的情况一样发生变化。然后它使用路由器配置来渲染相关组件。

React 组件不使用 React Router 渲染

React component not rendering with React Router

javascript

reactjs

react-router-v4