如何在我的 ReactJS 应用程序中使用 React Router 设置路由?

Question

我对反应路由器有一些问题。当我单击Edit时，它不会转到id页面。id位于 URL 中，但它不执行任何操作。

const Main = (props) => {
const { pathname } = props.location;

return (
<Fragment>
<div>
<div className="container">
<Header />
{pathname === "/create" ? <Create /> : null}
{pathname === '/edit/:id' ? <Edit /> : null}
{pathname === "/" ? <Home /> : null}
</div>
</div>
</Fragment>
);
};
export default withRouter(Main);

应用.js：

require('./components/Index');
import React from 'react'
import ReactDOM from "react-dom"
import Index from "./components/Index";
import { BrowserRouter as Router} from "react-router-dom";
import { ToastContainer } from 'react-toastify';
const App =() =>{
}
if (document.getElementById('app')) {
ReactDOM.render(<Router> <Index />  <ToastContainer /></Router>, document.getElementById('app'));
}

索引.js：

import React from "react";
import { Route, Switch } from "react-router-dom";
import Main from "./CRUD/Main";
import Create from "./CRUD/Create";
import Edit from "./CRUD/Edit";
import Home from "./CRUD/Home";
const Index = (props) => {
return (
<Main>
<Switch>
<Route path="/Create" component={Create} />
<Route path='/edit/:id' component={Edit} />
<Route exact path="/" component={Home} />
</Switch>
</Main>
);
};
export default Index;

我认为main.jspathname有一些问题.

Answer 1

在使用 react-router 时，您不需要像在Main中那样进行条件渲染。Switch将自动呈现与位置匹配的第一个子<Route>或<Redirect>。

因此，您需要从路由器组件中删除Main，即Index，使其如下所示：

const Index = (props) => {
return (
<>
<NavBar /> {/* NavBar is optional, I just added for example */}
<Switch>
<Route path="/create" component={Create} />
<Route path="/edit/:id" component={Edit} />
<Route exact path="/" component={Home} />
</Switch>
</>
);
}

导航栏：(Link秒;仅举个例子)

function NavBar() {
return (
<ul>
<li>
<Link to="/create">Go to create</Link>
</li>
<li>
<Link to="/edit/123">Go to edit with id = 123</Link>
</li>
<li>
<Link to="/">Go to home</Link>
</li>
</ul>
);
}

现在，当您单击上述链接时，它将自动将您带到相关组件(如路由中所述，即Index)。(无需手动条件检查)

例如，检索 URL 参数，即id使用 useParams hookEdit组件中

：

function Edit() {
const { id } = useParams<{ id: string }>(); // Remove <{ id: string }> if not using TypeScript
return <h2>Edit, {id}</h2>;
}