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をクリックすると、locationのpropはそのパス名を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')
);
DEV/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>
);
}
}
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. 'articles/new'ではなく'/articles/new'ですか？ – Jaxx