Исчезновение компонентов при использовании реакции-роутера в React - PullRequest
Новая
       3

Исчезновение компонентов при использовании реакции-роутера в React

0 голосов
/ 20 февраля 2020

Итак, я создавал приложение React и столкнулся с аналогичной проблемой исчезновения компонента при refre sh, точнее, что-то с реакции маршрутизатора, я должен использовать его неправильно

Приложение. js выглядит как 

import React from "react";
import "./App.css";
import { Home } from "./components/home";

function App() {
 return <Home />;
}

export default App

Домашний компонент 

export class Home extends Component {
render() {
  return (
    <BrowserRouter>
      <NavigationBar />
      <Switch>
        <Route path="/jobPortal" component={JobPortal} />
      </Switch>
    </BrowserRouter>
  );
}

Общий Navbar 

const NavigationBar = ({ userType }) => {
  return (
    <Navbar style={globalStyles.container} bg="dark" variant="dark">
      <Navbar.Brand style={globalStyles.container} href="/">
        Soffice
      </Navbar.Brand>
      <Nav className="ml-auto">
        <Nav.Link as={NavLink} to="/JobPortal">
          Job Portal
        </Nav.Link>
        {userType && (
          <Nav.Link as={NavLink} to="/logout">
            Log Out
          </Nav.Link>
        )}

        {!userType && (
          <React.Fragment>
            <Nav.Link as={NavLink} to="/SignUp">
              Sign Up
            </Nav.Link>
            <Nav.Link as={NavLink} to="/SignIn">
              Sign In
            </Nav.Link>
          </React.Fragment>
        )}
      </Nav>
    </Navbar>
  );
};

Экспорт по умолчанию NavigationBar;

Задание Navbar который появляется при доступе к jobPortal 

const NavigationBar = ({ url }) => {
  // let {url,url} =useRouteMatch();
  console.log(url);
  return (
    <Navbar style={{ ...globalStyles.container }} bg="info" variant="dark">
      <Nav className="mx-auto">
        <Nav.Link style={styles.navBarColor} as={NavLink} to="/JobPortal">
          Home
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Post`}>
          Post Job
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Want`}>
          Want Job
        </Nav.Link>
        <Nav.Link style={styles.navBarColor} as={NavLink} to={`${url}/Contact`}>
          Contact
        </Nav.Link>
      </Nav>
    </Navbar>
  );
};
const styles = {
  navBarColor: {
    color: "white",
    fontSize: 22
  }
};
export default NavigationBar;

компонент JobPortal 

export class JobPortal extends Component {
  componentDidMount() {
    console.log("path", this.props.match.url);
  }
  render() {
    const path = this.props.match.path;

    return (
      <BrowserRouter>
        <NavigationBar url={this.props.match.url} />
        <Switch>
          <Route path={`${path}/Want`} component={Want} />
        </Switch>
      </BrowserRouter>
    );
  }
}

нужный компонент 

class Want extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "",
      email: "",
      message: "",
      jobs: [
        {
          jobId: 1,
          jobTitle: "software"
        }
      ]
    };
  }

  handleClick() {
    console.log(this.state);
  }
  componentWillMount() {
    this.url = this.props.location.pathname;
    console.log("location", this.props.location.pathname);
  }
  render() {
    const styles = {
      card: {
        width: "14em",
        height: "100%",
        fontSize: 20,
        padding: 10
      }
    };
    return (
      <BrowserRouter>
        <Route path={`${this.url}/:jobId`} component={Job} />
        <Container>
          <Container></Container>
          <Container>
            <Row>
              {this.state.jobs.map((job, index) => (
                <Col style={{ padding: 20 }}>
                  <Card text="white" bg="dark" style={styles.card}>
                    <Card.Body>
                      <Card.Title>
                        <Link to={`${this.url}/${job.jobId}`}>
                          {job.jobTitle}
                        </Link>
                      </Card.Title>
                    </Card.Body>
                  </Card>
                </Col>
              ))}
            </Row>
          </Container>
        </Container>
      </BrowserRouter>
    );
  }
}

export default Want;

исчезающий компонент задания 

export class Job extends Component {
  render() {
    return <p>this will disappear</p>;
  }
}

полный код песочницы ссылка

https://codesandbox.io/s/mystifying-yalow-6jcyn?fontsize=14&hidenavigation=1&theme=dark

при нажатии на ссылка на программное обеспечение карта должна исчезнуть, но это не image , но пока компонент задания появляется и работает нормально, но когда я переосмысливаю sh страницу, компонент job исчезает и при нажатии ссылка на программное обеспечение странное расширение URL. компонент отклонений

1 Ответ

2 голосов
/ 21 февраля 2020

Это происходит из-за этой строки в want.js

<Route path={`${this.props.location.pathname}/:jobId`} component={Job} />

Каждый раз, когда вы перезагружаете браузер, он добавляет идентификатор в конец пути /JobPortal/Want/1, т.е. /JobPortal/Want/1/1, /JobPortal/Want/1/1/1, поэтому Вы постоянно меняете путь, который соответствует маршруту.

Просто измените его на 

<Route path={`${this.props.match.path}/:jobId`} component={Job} />

Я также был бы более точным с вашей ссылкой, поскольку она также дублирует себя на пути при каждом нажатии : 

<Link to={`/JobPortal/Want/${job.jobId}`}>
 {job.jobTitle}
</Link>

Будьте осторожны при использовании this.props.location.pathname, как это, потому что он включает в себя ваш params

...