Question

我试图使用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'));

Answer 1

我也遇到了同样的问题。我用一个技巧修复它。您可能在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中导入路线

Answer 2

@汤姆·卡纳斯基（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;

Answer 3

我解决了这个问题，只需使用标签而不是链接助手。不确定是否正确，但它对我有用，希望对其他人有帮助。

React Router Link更改路径，但不会呈现新组件

3 个答案: