要部署一个带有路由器的React应用,您可以按照以下步骤进行操作:
npm install react react-router-dom
npx create-react-app my-app
cd my-app
npm install react-router-dom
components。在components文件夹中创建用于导航的组件,比如Home.js和About.js。例如,您可以创建一个名为Home.js的组件,并在其中添加以下代码:import React from 'react';
const Home = () => {
return (
Home Page
);
}
export default Home;
pages。在pages文件夹中创建用于路由的页面组件,比如HomePage.js和AboutPage.js。例如,您可以创建一个名为HomePage.js的组件,并在其中添加以下代码:import React from 'react';
import Home from '../components/Home';
const HomePage = () => {
return (
);
}
export default HomePage;
routes。在routes文件夹中创建一个名为index.js的文件,并添加以下代码:import React from 'react';
import { Switch, Route } from 'react-router-dom';
import HomePage from '../pages/HomePage';
import AboutPage from '../pages/AboutPage';
const Routes = () => {
return (
);
}
export default Routes;
App.js的文件,并添加以下代码:import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import Routes from './routes';
const App = () => {
return (
);
}
export default App;
index.js文件中,将ReactDOM.render函数的第一个参数更改为,如下所示:import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);
npm start
这就是部署一个带有路由器的React应用的基本步骤。您可以根据需要在路由器中添加更多的页面和组件。