React роутер V4 не работает

Question

Так как 3 дня я работаю над реагирующим маршрутом, но он не работает .. Я не знаю, где я делаю неправильно, даже простой маршрут не работает ... если простая маршрутизация (без параметров) работает, то я хотел передать IDНОВЫЙ компонент .. Но я могу передать идентификатор опционально .. Если я удалю?тогда маршрутизация не работает .. Я пытался использовать переключатель и точно ..

And One More issue is by passing ID optionally i am getting Undefined in New Component Page During render (First time)..So i wanted to pass ID:1 from router .Please help me out...Thanks

    <Route name="ideas" path="/Hello" component={New} />  (Not Working)
<Route name="ideas" path="/:Hello" component={New} /> (Not working)
   <Route name="ideas" path="/New/:Hello?" component={New} />(Not working)
    <Route name="ideas" path="/" component={New} /> {Working}
    <Route name="ideas" path="/:Hello?" component={New} /> (working)

import React from 'react';
import ReactDOM from'react-dom'
import New from './New'
import Demo from "./demo";
import {
    BrowserRouter as Router,
    Route,
    Switch,

} from 'react-router-dom'

function App() {
    return (
<div>
    <Router>
        <Route name="ideas" path="/Hello" component={New} />
    </Router>
</div>

);
}
ReactDOM.render(
    <App />,
    document.getElementById("root")
);

export default App;

Answer 1

Я обновил ваши коды и ящики.Вы не использовали Switch из react-router-dom.Что необходимо при работе с остроумными маршрутами.Пожалуйста, проверьте обновленные коды и поле.

Используйте его следующим образом

import React from "react";
import ReactDOM from "react-dom";
import New from "./New";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

function App() {
  return (
    <div>
      <Router>
        <Switch>
          <Route name="ideas" path="/Hello" component={New} />
        </Switch>
      </Router>
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById("root"));

Вы также можете посмотреть на https://codesandbox.io/s/smoosh-currying-8job8.

Обновленная версия вашего кода:

https://codesandbox.io/s/unruffled-hellman-2f19h