[英]React component not rendering with React Router
我在遵循其路線后無法呈現組件時遇到了一些麻煩。 路由在父組件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;
我不明白為什么 Drawing 組件沒有返回。
你在做什么是錯誤的。 單擊鏈接時更改 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 to={`/drawing/${drawing.date}`}>
{drawing.date}
</Link>
底線是這個。 在這里,您提供了一些帶有超鏈接的文本。 單擊此路由器后,您現在的情況就會更改 URL。 然后它使用路由器配置來渲染相關組件。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.