如果不使用react-router-dom
进行渲染,可以通过条件渲染来实现路由功能。下面是一个示例:
import React, { useState } from 'react';
const App = () => {
const [route, setRoute] = useState('home');
const handleRouteChange = (newRoute) => {
setRoute(newRoute);
};
let content;
if (route === 'home') {
content = ;
} else if (route === 'about') {
content = ;
} else if (route === 'contact') {
content = ;
} else {
content = ;
}
return (
{content}
);
};
const Home = () => Welcome to Home
;
const About = () => About Us
;
const Contact = () => Contact Us
;
const NotFound = () => Page Not Found
;
export default App;
在这个示例中,我们使用useState
来跟踪当前的路由状态。通过点击按钮来改变路由,然后根据当前的路由状态进行条件渲染。
请注意,这种方法只适用于简单的应用程序,如果应用程序变得复杂,建议使用react-router-dom
来管理路由。