反應路由器鏈接不起作用

Question

React-router 的開端非常糟糕......看起來基本的東西不起作用。 使用 react-router 2.0.0 我的 Link 組件將 URL 更新為 /about，但我的頁面在此之后不會呈現 About 組件......

入口點js

var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = require('./components/App.react');
var About = require('./components/About');

ReactDOM.render(
    <Router history={hashHistory} >
        <Route path="/" component={App}>
            <Route path="about" component={About} />
        </Route>
    </Router>, 
    document.getElementById('app')
);

應用程序.js

'use strict';

var React = require('react');
var Link = require('react-router').Link;
var Header = require('./Header');
var UserPanel = require('./UserPanel');
var ModelPanel = require('./ModelPanel.react');
var EventPanel = require('./event/EventPanel');
var VisPanel = require('./vis/VisPanel');
var LoginForm = require('./LoginForm');
var AppStore = require('../stores/AppStore');
var AppStates = require('../constants/AppStates');

var App = React.createClass({

  [... code omitted ...]

  render: function() {
    var viewStateUi = getViewStateUi(this.state.appState);

    return (
      <div>
        <Header />
        <Link to="/about">About</Link>
        {viewStateUi}
      </div>
    );
  }

});

Answer 1

由於 'About' 路由是 'App' 路由的子級，因此您需要將this.props.children添加到您的 App 組件中：

var App = React.createClass({

 render: function() {

   var viewStateUi = getViewStateUi(this.state.appState);

    return (
      <div>
        <Header />
        <Link href="/about">About</Link>
        {viewStateUi}
        {this.props.children}
      </div>
    );
  }
});

或分開您的路線：

ReactDOM.render(
  <Router history={hashHistory} >
    <Route path="/" component={App} />
    <Route path="/about" component={About} />
  </Router>, 
  document.getElementById('app')
);

Answer 2

出於某種原因， <Link> s 不適合我使用下面的配置。

// index.js

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter >
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

// App.js

  return (
      <div className="App">
        <Route exact={true} path="/:lang" component={Home} />
        <Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} />
        <Route path="/:lang/play" component={Play} />} />
        <Route path="/:lang/end" component={End} />
      </div >
    );

主頁組件有鏈接，但應用程序上的鏈接也會做同樣的事情。 每次我點擊它時，它只會改變 url，但視圖會保持不變。

當我將withRouter添加到 App.js 時，我能夠讓它工作

export default withRouter(connect(mapStateToProps, { f, g })(App));

我還是不明白發生了什么。 也許它與 redux 有關，或者我遺漏了一些細節。

Answer 3

沒有一個解決方案對我withRouter ，包括將withRouter添加到我的組件中。 我遇到了同樣的問題，瀏覽器的地址欄更新了 URL，但組件沒有呈現。 在調試我的問題期間，我意識到我必須展示我的問題的上下文，因為它與 OP 的內容有些不同。

我試圖開始工作的路線是采用任意參數的動態路線，例如

<Route path={`/hr/employees/:id`} component={EmployeePage} />

此路由使用的組件是“自引用”的，這意味着在組件或其子組件中，它們有一個指向/hr/employees/:id的Link組件，但具有不同的 id。 所以假設我在/hr/employees/3並且在頁面上，有一個指向/hr/employees/4 <Link to='/hr/employees/4'> ，例如<Link to='/hr/employees/4'> ，我會遇到這個問題組件沒有重新渲染的地方。

為了解決這個問題，我簡單地修改了我的EmployeePage組件的componentDidUpdate方法：

componentDidUpdate(prevProps) {
  if (this.props.match.params.id !== prevProps.match.params.id) {
    // fetch data
  }
}

如果您使用功能組件，請使用useEffect ：

const EmployeePage = props => {
  const {id} = props.match.params
  
  useEffect(() => {
    // fetch data
  }, [id])
}