要部署一个带有路由器的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应用的基本步骤。您可以根据需要在路由器中添加更多的页面和组件。