React Routers верны, но не работают должным образом

Question

У меня есть приложение React с указанным ниже кодом:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Start from './Portal/Membership/Anonymous/Start';
import Register from './Portal/Membership/Anonymous/Register';
import NoMatch from './Portal/Membership/Anonymous/NoMatch';


const App = () => (
    <div className="App" style={{ height: "100vh" }}>
        <Router>
            <div>
                <Switch>
                    <Route exact path="/" component={Start} />
                    <Route exact path="/Register" Component={Register} />
                    <Route component={NoMatch} />
                </Switch>
            </div>
        </Router>
    </div>
);

export default App;

Работает только путь /, но если я открою /Start, страница вообще ничего не отобразит, даже NoMatch. Если перейти к неправильному URL-адресу, NoMatch будет отображаться.

Если я изменю компонент по умолчанию на Register, компонент Register отобразится в / location

Answer 1

Ошибка:

В настоящее время определены только маршруты / & /Register.

Исправлено:

Вам необходимо объявить маршрут, /Start:

<Route path="/Start" component={Start} />

Пример:

<Switch>
  <Route exact path="/" component={Start} />
  <Route path="/Start" component={Start} />
  <Route path="/Register" component={Register} />
  <Route component={NoMatch} />
</Switch>

Answer 2

Я обыскал всю сеть и прочитал всю документацию по React Router, но ничего не нашел, пока случайно не скопировал и не вставил одну строку маршрутизаторов и не обнаружил разницу между Component и component !!

Интересно, почему response не распознал атрибут Component (с заглавной буквы c) и не выдал исключение, если ни один из component, render и children не определен!

Помните, что если вы напишите что-то вроде <SomeComponent someBooleanAttribute="true" /> React предупредит вас сообщением although true works here but you must write someBooleanAttribute={true} because someBooleanAttribute="false" will be recognized as true, но НИКАКОГО предупреждения или ошибки не будут показаны разработчику по этой более важной проблеме!