0
그래서 내가 만드는 기본 앱은 백엔드 레일 API에서 기사를 요청하려고합니다. 나는 백엔드 측에서 모든 것을 올바르게 설정했고 ArticleHome.js는 내가 가지고있는 레일 컨트롤러에 암시 된 모든 기사를 반환합니다. 어떤 이유 반응 라우터 v4를 렌더링하지 않는 구성 요소
def index
render json: Article.all
end
def show
render json: @article = Article.find(params[:id])
end
의 SingleArticleShow.js 및 NewArticle.js은 구성 요소를 렌더링 될 것 같지 않습니다. App 컴포넌트의 자식으로 배치했습니다. ArticleHome.js 파일에서 article.title Link를 클릭하면 위치 소품이 pathname을 article/: id로 변경하지만 App.js와 관련된 SingleArticleShow.js에 대해 구성 요소가 렌더링되지 않습니다. 브라우저는 잘못된 점에 대한 피드백을 제공하지 않습니다.
내가 성공하지/w 참조로 다음을 사용하고 있습니다 :
https://reacttraining.com/react-router/web/guides/redux-integration
dev에/JS /하는 index.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from "react-dom";
import {Provider} from 'react-redux';
import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import promise from 'redux-promise';
import createLogger from 'redux-logger';
import allReducers from './reducers';
import {withRouter, Route, Switch, BrowserRouter} from 'react-router-dom';
import App from './components/App';
import ArticlesHome from './components/ArticlesHome';
import SingleArticleShow from './components/SingleArticleShow';
import NewArticle from './components/NewArticle';
const logger = createLogger();
const store = createStore(
allReducers,
applyMiddleware(thunk, promise, logger)
);
ReactDOM.render(
<Provider store={store}>
<BrowserRouter history={history}>
<div>
<Route path="/" component={App}/>
</div>
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
디바이스는/JS/구성 요소/앱 .js
import {withRouter, Route, Switch} from 'react-router-dom';
import connect from 'react-redux';
import ArticlesHome from './ArticlesHome';
import NewArticle from './NewArticle';
import SingleArticleShow from './SingleArticleShow';
// require('../../scss/style.scss');
export default class App extends Component{
render(){
return(
<div>
This is our app
<Switch>
<Route exact path="articles/new" component={NewArticle}
/>
<Route exact path="articles/:id" component=
{SingleArticleShow}/>
<Route exact path="/" component={ArticlesHome}/>
</Switch>
</div>
);
}
}
,363,210
DEV/JS/부품/ArticlesHome.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import {getArticles} from '../actions/index';
import {Link} from 'react-router-dom';
class ArticlesHome extends Component{
componentWillMount(){
this.props.getArticles();
}
renderArticles(){
return this.props.articles.map((article) => {
return (
<li key={article.id}>
<Link to={"articles/" + article.id }>
<h4>{article.title}</h4>
</Link>
</li>
);
});
}
render(){
return(
<div className="container">
<div>
<Link to="articles/new" className="btn btn-warning">
Create Article
</Link>
</div>
Articles Home Page
<ul>
{this.renderArticles()}
</ul>
</div>
);
}
}
function mapStateToProps(state){
return {articles: state.articles.all};
}
export default connect(mapStateToProps, {getArticles})(ArticlesHome);
DEV/JS/부품/SingleArticleShow.js는
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { getArticle } from '../actions/index';
import { withRouter } from 'react-router-dom';
class SingleArticleShow extends Component{
componentWillMount(){
console.log('Is this going to print?');
this.props.getArticle(this.props.article.id);
}
render(){
if (!this.props.article){
return <div> Getting article, please wait. </div>;
}
return(
<div className="container">
<h3> Title: {this.props.article.title}</h3>
</div>
);
}
}
function mapStateToProps({articles}, ownProps){
return {article: articles[ownProps.match.params.id]};
}
export default withRouter(connect(mapStateToProps, {getArticle})
(SingleArticleShow));
이 누구 만약 package.json
{
"name": "react-redux-template",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"dev": "webpack",
"start": "webpack-dev-server"
},
"license": "ISC",
"dependencies": {
"axios": "^0.13.1",
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-2": "^6.24.1",
"babel-register": "^6.9.0",
"cross-env": "^1.0.8",
"css-loader": "^0.23.1",
"expect": "^1.20.1",
"node-libs-browser": "^1.0.0",
"node-sass": "^3.8.0",
"react": "^0.14.3",
"react-addons-test-utils": "^15.1.0",
"react-dom": "^0.14.3",
"react-redux": "4.3.0",
"react-router-dom": "^4.0.0",
"react-router-redux": "^5.0.0-alpha.8",
"redux": "^3.5.2",
"redux-form": "^4.1.3",
"redux-logger": "^2.6.1",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.1.0",
"sass-loader": "^4.0.0",
"style-loader": "^0.13.1",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-dev-server": "^1.14.1",
"webpack-hot-middleware": "^2.11.0"
},
"devDependencies": {
"babel-plugin-react-transform": "^2.0.2",
"babel-preset-stage-0": "^6.5.0",
"react-transform-hmr": "^1.0.4"
}
}
import {GET_ARTICLES, GET_ARTICLE, CREATE_ARTICLE} from './types';
import axios from 'axios';
const API_URL = "http://localhost:3000/api/v1";
export function getArticles(){
const request = axios.get(`${API_URL}/articles`);
return{
type: GET_ARTICLES,
payload: request
}
}
export function createArticle(props){
const request = axios.post(`${API_URL}/articles`, props);
return{
type: CREATE_ARTICLE,
payload: request
};
}
export function getArticle(id){
const request = axios.get(`${API_URL}/articles/${id}`);
return{
type: GET_ARTICLE,
payload: request
};
}
이다
도움을 줄 수 있다면, 고맙겠습니다. 감사.
의 시도 할 것 모든 경로 및 링크 슬래시 선도? I.E. 'articles/new' 대신'/ articles/new'를 사용합니까? – Jaxx