使用Javascript/React根据功能路由不同的URLs的方法如下:
npm install react react-router-dom
routes.js
。在该文件中,定义不同URL路径与对应组件的映射关系。例如:import React from 'react';
import { Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Contact from './components/Contact';
const Routes = () => {
return (
<Switch>
<Route exact path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
</Switch>
);
};
export default Routes;
import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import Routes from './routes';
const App = () => {
return (
<Router>
<div>
{/* 其他组件或布局 */}
<Routes />
{/* 其他组件或布局 */}
</div>
</Router>
);
};
export default App;
http://yourdomain.com/about
时,将会渲染About
组件。这是一个基本的使用Javascript/React根据功能路由不同的URLs的方法。根据具体需求,你可以进一步扩展和定制路由配置,例如添加嵌套路由、参数传递等。
推荐的腾讯云相关产品:腾讯云云服务器(CVM)和腾讯云对象存储(COS)。
领取专属 10元无门槛券
手把手带您无忧上云