Question

我正在尝试创建一个嵌套路由 - 当用户登录时打开仪表板，当仪表板打开时，我想创建一个嵌套路由，通过创建一个侧面菜单并更改右边的内容但不能这样做。当我尝试访问仪表板中的帖子页面时，它没有打开。

import React from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { userActions } from '../_actions';
import { PostPage } from './PostPage';
import { HomePage } from '../HomePage';

class DashboardPage extends React.Component {
  render() {
    const { url } = this.props;
    return (
      <div>
        <h1>BasicRouting</h1>
        <p>With the help of "Match" Component we can specify the Component we want to render for a particular pattern of the App location/window.pathname.</p>
        <p>Select a level from Left Navigation to view the content, also notice the change in URL.</p>
        <div className="rightContent">
          <p>Second Level Content will appear here:</p>
          <Route path={`${this.props.match.url}/post`} component={PostPage} />
        </div>
      </div>
    );
  }
}

function mapStateToProps(state) {
  console.log(state)
  return {
      isLoggedIn: state
  };
}

const connectedDashboardPage = connect(mapStateToProps)(DashboardPage);
export { connectedDashboardPage as DashboardPage };

Answer 1

您的代码中存在多个问题。

您从'react-router-dom'导入{Switch ...}，但之后从未使用过它。

如果要在上层/父组件中调用路由，则需要导入{withRouter}以包装redux连接类，例如，

const connectedDashboardPage = connect(mapStateToProps)(DashboardPage);
const withRouterConnectedDashboardPage = 
withRouter(connectedDashboardPage);
export default withRouterConnectedDashboardPage;

最终建议，请阅读本教程： https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf ＆安培; 请始终参考：https://reacttraining.com/react-router/

React router 4嵌套路由不起作用

1 个答案: