react createhashrouter 使用
使用`createHashRouter`函数创建一个带有哈希路由的 React Router。
首先,确保已经安装了 `react-router-dom` 包。
然后,在你的组件文件中导入所需的模块:
jsx
import { createHashHistory } from 'history';
import { createHashRouter, Route, Switch } from 'react-router-dom';
接下来,创建一个哈希历史记录对象:
jsx
const history = createHashHistory();
然后,使用`createHashRouter`函数创建一个带有哈希路由的React Router组件:
jsx
const App = () => {
return (
<HashRouter history={history}>
{/* 在这里添加<Route>和<Switch>组件 */}
</HashRouter>
);
};
最后,您可以在 `<Route>` 组件中定义路由路径和组件。以下是一个示例:
jsx
const App = () => {
return (
<HashRouter history={history}>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
</HashRouter>
);
};
这是一个基本的例子,你可以根据自己的应用程序的需要添加更多的路由路径和组件。
最后,确保将 `<App>` 组件渲染到根元素中:
jsx
react router v6 文档der(<App />, ElementById('root'));
现在,您可以在浏览器中查看您的应用程序,访问 ` 来查看主页,访问 ` 来查看关于页面等等。
发表评论