反应路由器 V4 不起作用

Question

从 3 天开始，我正在研究反应路线，但它不起作用。我 我不知道我在哪里做错了，即使是简单的路线也不起作用......如果简单的路由(没有参数(工作，那么我想将 ID 传递给 NEW 组件。 但是我可以选择性地传递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

我更新了你的代码沙箱。您没有使用react-router-dom中的Switch。这在处理机智路线时是必要的。请检查更新的代码沙盒。

按以下方式使用它

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