React Router отображает только один маршрут - PullRequest
Новая
       47

React Router отображает только один маршрут

0 голосов
/ 08 октября 2018

Я новичок в React и реагировать на маршрутизатор-дом.Я провел пару часов сейчас, и я просто зашел в тупик.

Я использую create-реакции-приложение и Bulma для CSS.Мои зависимости: 

"dependencies": {
  "bulma": "^0.7.1",
  "font-awesome": "^4.7.0",
  "node-sass-chokidar": "^1.3.3",
  "react": "^16.5.2",
  "react-bulma-components": "^2.1.0",
  "react-dom": "^16.5.2",
  "react-fontawesome": "^1.6.1",
  "react-router-dom": "4.3.1",
  "react-scripts": "2.0.4"

},

Я просмотрел все связанные вопросы по stackoverflow, документации create-реагировать на приложение и искал их раздел открытых проблем в своем репо, гуглил каждыйвозможное ключевое словоЯ в растерянности.

Мой маршрутизатор будет отображать только один маршрут (Homeroute).

Как мне сделать так, чтобы также отображался маршрут '/ create'?

Я пробовал:

  • комбинации 'точные атрибуты 'и' строгие '
  • переносят все после или с
  • пробуют оба (не) переноса с

  • пробовал оба BrowserRouter и HashRouter 

    import React, { Component } from "react";
import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom";

const Home = () => {
    return (<h2>This is Home</h2>);
}
const Create = () => {
    return (<h2>This is Create page</h2>);
}

class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <Navigation />
          <div className="section">
            <Switch>
              <Route path="/" exact component={Home} />
              <Route path="/create" exact Component={Create} />
            </Switch>
          </div>
          <Footer />
        </div>
      </HashRouter>
    );
  }
}
export default App;

URL: http://localhost:3000/#/

Результат: "Это дом"

Ожидайте: «Это Дом»

URL: http://localhost:3000/#/create

URL: http://localhost:3000/#/create/

Результат: Ничего

Ожидайте: «Это страница создания«

1 Ответ

0 голосов
/ 08 октября 2018

Это опечатка.Обратите внимание на букву «C», она должна быть в нижнем регистре.

Внесите изменение с 

<Route path="/create" exact Component={Create} />

на 

<Route path="/create" exact component={Create} />

Это демо:https://codesandbox.io/s/oq0rov0r4q

...