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

Я новичок в React и response-router-dom. Я провел пару часов и просто захожу в тупик.

Я использую приложение create-react-app и 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-response-app и просмотрел их раздел открытых проблем в их репо, погуглил все возможные ключевые слова. Я в растерянности.

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

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

Я пробовал:

  • комбинации "точных" и "строгих" атрибутов
  • обернул все после <BrowserRouter> или <HashRouter> с помощью <div>
  • попробовал как (не) обертывать <Route> с <Switch>
  • попробовал как 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: // локальный: 3000 / # /

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

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


URL: http: // локальный: 3000 / # / создать

URL: http: // локальный: 3000 / # / создать /

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
1 323
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

к

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

Это демонстрация: https://codesandbox.io/s/oq0rov0r4q

Другие вопросы по теме