react 路由跳转
step1:
npm i react-router-dom
step2: E:\Users\coder\WebstormProjects\untitled2\src\component\about.js
import React from 'react';
function About () {
return <div>
<h2>GeeksforGeeks is a computer science portal for geeks!</h2>
Read more about us at :
<a href="https://www.geeksforgeeks.org/about/">
https://www.geeksforgeeks.org/about/
</a>
</div>
}
export default About;
step3: E:\Users\coder\WebstormProjects\untitled2\src\component\contact.js
import React from 'react';
function Contact (){
return <address>
You can find us here:<br />
GeeksforGeeks<br />
5th & 6th Floor, Royal Kapsons, A- 118, <br />
Sector- 136, Noida, Uttar Pradesh (201305)
</address>
}
export default Contact;
step4: E:\Users\coder\WebstormProjects\untitled2\src\component\home.js
import React from 'react';
function Contact (){
return (<h1>首页</h1>);
}
export default Contact;
step5: E:\Users\coder\WebstormProjects\untitled2\src\App.js
import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link, Routes} from 'react-router-dom';
import Home from './component/home';
import About from './component/about';
import Contact from './component/contact';
import './App.css';
import {makeStyles} from "@material-ui/core/styles";
import Grid from '@material-ui/core/Grid';
import Container from '@material-ui/core/Container';
const useStyles = makeStyles((theme) => ({
root: {
flexGrow: 1,
},
paper: {
padding: theme.spacing(2),
textAlign: 'center',
color: theme.palette.text.secondary,
},
}));
class App extends Component {
render() {
return (
<React.Fragment>
<Container maxWidth="xl">
<Router>
<div className="App">
<Grid container spacing={3}>
<Grid item xs={2} style={{backgroundColor: "#4e342e"}}>
<div>
<li><Link to="/">首页</Link></li>
<li><Link to="/about">关于</Link></li>
<li><Link to="/contact">联系</Link></li>
</div>
</Grid>
<Grid item xs={10} style={{backgroundColor: "#039be5"}}>
<Routes>
<Route path='/' element={<Home/>}/>
<Route path='/about' element={<About/>}/>
<Route path='/contact' element={<Contact/>}/>
</Routes>
</Grid>
</Grid>
</div>
</Router>
</Container>
</React.Fragment>
);
}
}
export default App;
end