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'));回答 3
Stack Overflow用户
发布于 2018-05-18 16:43:03
我也面临着同样的问题。我用一个小把戏把它修好了。你可能在你的App.js或index.js中有BrowseRouter，我在我的index.js中是这样的：
ReactDOM.render(<BrowserRouter>
<App />
</BrowserRouter>, document.getElementById('root'))我把它改成：
ReactDOM.render((
<BrowserRouter>
<Route component={App} />
</BrowserRouter>
), document.getElementById('root'))实际上，我们这样做是为了让路由器查看完整的应用程序，因此它还会检查路由路径，并自动呈现视图。我希望它能帮上忙。
注意：-不要忘记在您的index.js中导入路由
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用户
发布于 2021-01-06 13:22:19
我简单地用标签代替了Link helper就解决了这个问题。不确定它是否正确，但它对我有效，希望它能帮助其他任何人。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47754269
复制相关文章
相似问题
腾讯云开发者
