Question

我对React还是很陌生，即使在浏览了本主题的所有问题之后，也陷入了我无法解决的React Router 4问题。我在页面中间有一个导航部分，该部分应根据我单击的内容切换页面底部的视图。当我单击导航栏中的新部分时，URL会更改为正确的内容，但我的视图不会更新，而是留为空白。我的代码有什么问题导致此问题吗？参见下文：

我在页面顶部的主要导航栏（有效）可以在这里看到：

import React, { Component } from "react";
import { Menu, Container, Button, Icon } from "semantic-ui-react";
import { NavLink, Link, withRouter } from 'react-router-dom'
import "semantic-ui-css/semantic.min.css";

class NavBar extends Component {
  render() {
    return (
      <Menu inverted fixed="top">
        <Container>
          <Menu.Item as={Link} to="/" header>
            <Icon name="angle double up" size="big" />
            Atlas
          </Menu.Item>
          <Menu.Item as={NavLink} to="/profile" name="Profile" />
          <Menu.Item as={NavLink} to="/budget" name="Budget" />
          <Menu.Item position="right">
            <Button as={Link} to="/settings" color="brown" animated="vertical">
              <Button.Content hidden>Settings</Button.Content>
              <Button.Content visible>
                <Icon name="setting" />
              </Button.Content>
            </Button>
            <Button as={Link} to="/proSignUp" color="brown" animated="fade">
              <Button.Content visible>Sign-up for a Pro Account</Button.Content>
              <Button.Content hidden>$5 a month</Button.Content>
            </Button>
          </Menu.Item>
        </Container>
      </Menu>
    );
  }
}

export default withRouter(NavBar);

我的App.jsx文件（有效），其中包含导航栏和路由：

import React, { Component } from "react";
import { Container } from "semantic-ui-react";
import { Route, Switch } from "react-router-dom";
import ProfileDashboard from "../../features/profile/ProfileDashboard/ProfileDashboard";
import NavBar from "../../features/nav/NavBar/NavBar";
import HomePage from "../../features/home/HomePage";
import BudgetDashboard from "../../features/budget/BudgetDashboard/BudgetDashboard";
import SettingsPage from "../../features/settings/Settings"
import ProSignUp from "../../features/proSignUp/ProSignUp";

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" component={HomePage} />
        </Switch>

        <Route
          path="/(.+)"
          render={() => (
            <div>
              <NavBar />
              <Container className="main">
                <Switch>
                  <Route path="/profile" component={ProfileDashboard} />
                  <Route path="/budget" component={BudgetDashboard} />
                  <Route path="/settings" component={SettingsPage} />
                  <Route path="/proSignUp" component={ProSignUp} />
                </Switch>
              </Container>
            </div>
          )}
        />
      </div>
    );
  }
}

export default App;

我的个人资料页面导航栏（正在更改路线）可以在此处查看：

import React from "react";
import { Grid, Menu } from "semantic-ui-react";
import { NavLink, withRouter } from 'react-router-dom'

const ProfileNav = () => {
  return (
    <Grid.Column width={16}>
      <Menu horizontal="true" secondary>
        <Menu.Item as={NavLink} to="/profile/overview">Overview</Menu.Item>
        <Menu.Item as={NavLink} to="/profile/analytics">Analytics</Menu.Item>
      </Menu>
    </Grid.Column>
  );
};

export default withRouter(ProfileNav);

最后，包含我的个人资料导航栏和路线的我的ProfileDashboard（不起作用）可以在下面看到：

import React, { Component } from "react";
import { Grid, Divider } from "semantic-ui-react";
import { Switch, Route, Redirect } from "react-router-dom";
import ProfileHeader from "../ProfileHeader/ProfileHeader";
import ProfileNav from "../ProfileNav/ProfileNav";
import ProfileList from "../ProfileList/ProfileList";
import ProfileAnalytics from "../ProfileAnalytics/ProfileAnalytics";

const contentHash = {
  headerContent: [
    {
      title: "Demographics",
      age: 21,
      sex: "male",
      location: "Tucky, KY"
    },
    {
      title: "Profession",
      jobTitle: "Event Coordinator",
      employer: "Tucky Tuck",
      experience: "5 years",
      preTaxIncome: 62000,
      postTaxIncome: 44000
    },
    {
      title: "Investments",
      highRisk: "blah blah",
      mediumRisk: "blah blah",
      lowRisk: "blah blah"
    },
    {
      title: "Retirement",
      "401k": 415000,
      RothIRA: 61000
    }
  ]
};

class ProfileDashboard extends Component {
  render() {
    return (
      <Grid>
        <Grid.Column width={16}>
          <ProfileHeader headerContent={contentHash.headerContent} />
          <Divider />
          <ProfileNav />
          <Switch>
            <Redirect exact from="/profile" to="/profile/overview" />
            <Route path="profile/overview" component={ProfileList} />
            <Route path="profile/analytics" component={ProfileAnalytics} />
          </Switch>
        </Grid.Column>
      </Grid>
    );
  }
}

export default ProfileDashboard;

Answer 1

经过反复试验，我弄清楚了。我必须将要在两个组件之间切换的两个组件放在一个新组件中，以便路由工作。因此，我制作了一个新的ProfileFooter组件，该组件保留所有路由逻辑，并在ProfileList和ProfileAnalytics页面之间切换。

import React, { Component } from "react";
import { Switch, Route, Redirect } from "react-router-dom";
import ProfileList from "../ProfileList/ProfileList";
import ProfileAnalytics from "../ProfileAnalytics/ProfileAnalytics";

class ProfileFooter extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Redirect exact from="/profile" to="/profile/overview" />
          <Route path="/profile/overview" component={ProfileList} />
          <Route path="/profile/analytics" component={ProfileAnalytics} />
        </Switch>
      </div>
    );
  }
}

export default ProfileFooter;

React Router 4：内部导航更改URL但未查看

1 个答案: