react-router-dom v5注册路由表
时间: 2024-01-22 15:16:14 浏览: 83
关于react-router/react-router-dom v4 history不能访问问题的解决
以下是使用react-router-dom v5注册路由表的示例:
```jsx
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
// 导入需要渲染的组件
import Home from './components/Home';
import About from './components/About';
import NotFound from './components/NotFound';
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route component={NotFound} />
</Switch>
</Router>
);
};
export default App;
```
在上面的示例中,我们首先导入了需要渲染的组件(例如Home、About和NotFound)。然后,我们使用`BrowserRouter`作为路由器,并使用`Switch`组件来确保只有一个路由被渲染。在`Switch`组件内部,我们使用`Route`组件来定义每个路由的路径和对应的组件。
- 当路径为`/`时,渲染`Home`组件。
- 当路径为`/about`时,渲染`About`组件。
- 如果没有匹配的路径,则渲染`NotFound`组件。
请注意,上述示例中的组件路径和组件名称仅供参考,你需要根据自己的项目结构和组件名称进行相应的更改。
阅读全文