javascript - React Router 4：内部导航更改 URL 但不更改视图

问题描述

我对 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;

标签： javascriptreactjsreact-routerreact-router-v4

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;

javascript - React Router 4：内部导航更改 URL 但不更改视图

问题描述

解决方案

推荐阅读