React-router link 不工作

Question

React-router 的开局真的很糟糕……看起来基本的东西不起作用。使用 react-router 2.0.0 我的 Link 组件将 URL 更新为 /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')
);

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> 无法使用以下配置。

// 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 >
    );

Home 组件有 Link，但 App 上的 Links 也会做同样的事情。每次我点击它，它只会改变 url，但视图会保持不变。

当我将 withRouter 添加到 App.js

时，我能够让它工作

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

我还是不明白发生了什么。也许它与 redux 有关，或者我遗漏了一些细节。

Answer 3

None 的解决方案对我有用，包括将 withRouter 添加到我的组件。我遇到了同样的问题，浏览器的地址栏更新了 URL 但组件没有呈现。在调试我的问题期间，我意识到我必须展示我的问题的背景，因为它与 OP 的有点不同。

我试图开始工作的路线是一条采用任意参数的动态路线，例如

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

此路由使用的组件是“self-referential”，这意味着在该组件或其子组件中，它们有一个指向 /hr/employees/:id 的 Link 组件，但带有不同的身份证。所以假设我在 /hr/employees/3 并且在页面上，有一个 link 到 /hr/employees/4，例如<Link to='/hr/employees/4'>，如果组件没有 re-render，我会遇到这个问题。

为了解决这个问题，我简单地修改了我的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])
}

React-router link 不工作

React-router link doesn't work

reactjs

react-router