React Router Link更改路径，但不呈现新组件
React Router Link更改路径，但不呈现新组件
提问于 2017-12-11 21:41:29
我正在尝试使用React Router 4.2.2，以便每当我单击一个“卡片”组件时加载一个名为PostFocus的组件，并在它周围环绕一个链接。当我点击一个“卡片”时，路径会正确地改变，但是PostFocus组件不会被渲染。我是不是做错了什么或者在路由中遗漏了什么？我想不出来。
代码如下：
class PostsList extends React.Component {
render() {
var createCards = this.props.posts.map((post, i) => {
return (
<div key={i}>
<Link to={`/${post.id}`}>
<Card title={post.title} subtitle={post.subtitle} date={post.date} id={post.id}/>
</Link>
<Route exact path={`/${post.id}`} render={(post) => (
<PostFocus content={post.content}/>
)}/>
</div>
);
});
return (
<div>
{createCards}
</div>
);
}应用组件：
import React from 'react';
import PostsList from '../containers/posts_list.js';
import {withRouter} from 'react-router';
class App extends React.Component {
render() {
return(
<div>
<PostsList />
</div>
);
}
}
export default withRouter(App);index.js代码：
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.jsx';
import reducers from './reducers';
const createStoreWithMiddleware = applyMiddleware(ReduxPromise)(createStore);
ReactDOM.render(
<Provider store={createStoreWithMiddleware(reducers)}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
, document.getElementById('root'));Stack Overflow用户
发布于 2018-08-11 01:44:15
@Tom Karnaski嗨...很抱歉回复得太晚了，我没有时间做这件事。您的代码正在我的系统中运行，我没有权限推送您的存储库中的分支。使您的App.js如下所示。它肯定会工作的..
import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Navbar from './Components/Navbar/Navbar';
class App extends React.Component {
render() {
return (
<Router>
<div className="App">
<Route component={Navbar}/>
</div>
</Router>
);
}
}
export default App;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47754269
复制相关文章
相似问题
腾讯云开发者
