react 路由跳转

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