Question

在确定特定组件的React Router 4路由时遇到问题。我有以下项目结构：

[dir] node_modules
[dir] public
[dir] src
    [dir] components
        [dir] Profile
            - Navigation.jsx
            - Card.jsx
            - Overview.jsx
            - About.jsx
        - Home.jsx
        - Login.jsx
        - Profile.jsx
    - App.jsx
    - index.js

问题是，我希望我的Profile.jsx（位于src/components/Profile.jsx中）成为我的主要切入点，然后我需要另一个导航来显示名为{{1}的两个不同子组件}和Overview。但是，我希望访问者进入或导航About时Profile.jsx默认使用Overview组件，然后如果访问者单击“关于”，它将带他到http://example.com/coolguy82 （但现在不呈现http://example.com/coolguy82/about组件）。

因此，基本上我想要的是在访问Overview和http://example.com/coolguy82时获得相同的UI配置，但是当我访问http://example.com/coolguy82/overview时获得不同的UI配置。我确实做到了这一点，但是当我导航至http://example.com/coolguy82/about（通过浏览器地址栏）时，我的http://example.com/coolguy82仅呈现了Profile.jsx和Card组件（这就是我想要的）），但不会呈现Navigation组件。仅当我单击导航以转到“概述”时，它才会呈现页面的那部分。

我的代码如下（省略了一些不需要的代码）：

App.js

Overview

Navigation.jsx

import React, { Component } from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link,
  Redirect
} from "react-router-dom";

import Home from "./components/Home.jsx";
import Login from "./components/Login.jsx";
import Profile from "./components/Profile.jsx";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <div>
            <header>
              <nav className="main">
                <ul>
                  <li>
                    <Link to="/">Home</Link>
                  </li>
                  <li>
                    <Link to="/login">Login</Link>
                  </li>
                </ul>
              </nav>
            </header>
            <Switch>
              <Route path="/" exact component={Home} />
              <Route exact path="/login" component={Login} />
              <Route
                path="/:username"
                render={props => <Profile {...props} />}
              />
            </Switch>
          </div>
        </Router>
      </React.Fragment>
    );
  }
}

export default App;

Profile.jsx

import React, { Component } from "react";
import { Link } from "react-router-dom";

class Navigation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      user: this.props.user,
      tab: this.props.active
    };
  }
  render() {
    let { user, tab } = this.state;
    return (
      <React.Fragment>
        <ul className="nav nav-tabs">
          <li className="nav-item">
            <Link
              to={`/${user}/overview`}
              className={"nav-link " + (tab === "overview" ? "active" : "")}
              onClick={() => this.setState({ tab: "overview" })}
            >
              Overview
            </Link>
          </li>
          <li className="nav-item">
            <Link
              to={`/${user}/about`}
              className={"nav-link " + (tab === "about" ? "active" : "")}
              onClick={() => this.setState({ tab: "about" })}
            >
              About
            </Link>
          </li>
        </ul>
      </React.Fragment>
    );
  }
}

export default Navigation;

我在做什么错，我该如何纠正？我假设我为React Router配置了错误的代码。

React Router 4，特定组件的子路由

0 个答案: