React Router: нужно - PullRequest
Новая
       5

React Router: нужно

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

У меня есть этот код, который я пытался заставить работать. Не могу понять, что с ним не так! Там нет ошибок, и я попробовал несколько способов импорта / экспорта и изменения функций на const. 

 import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { Home } from "./Home";
import { Contact } from "./Contact";

class App extends Component {
  render() {
    return (
      <React.Fragment>
        <Router>
          <Switch>
            <Route path="/" component={Home} />
            <Route path="/contact">
              <Contact />
            </Route>
          </Switch>
        </Router>
      </React.Fragment>
    );
  }
}
export default App;

Then I have two separate functions 

    import React from "react";

export function Home() {
  return (
    <div>
      <h2>Whats up!</h2>
      <p>This is sample text. </p>
    </div>
  );
}
    import React from "react";

export function Contact() {
  return (
    <div>
      <h2>Contact page!</h2>
      <p>This is different text. </p>
    </div>
  );
}
export default Contact;

1 Ответ

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

Исходя из вашего последнего комментария - «Приведенный выше код фактически отображает все, что находится в первом маршруте, независимо от URL», проблема в том, что вы не предоставляете компонентам Route exact опору true.

Switch отобразит первое совпадение Route и пропустит все остальные. Поскольку / "соответствует" всем маршрутам, вы видите только компонент Home.

...