React 路由

最新推荐文章于 2024-09-25 18:25:31 发布

dengyu.123

最新推荐文章于 2024-09-25 18:25:31 发布

阅读量316

点赞数 3

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/2301_77051950/article/details/142320270

版权

About.index.js

import React, {Component} from 'react';

class About extends Component {
    render() {
        return (
            <div>
                我是about组件
            </div>
        );
    }
}

export default About;

Home.Message.index.js

import React, {Component} from 'react';

class Message extends Component {
    render() {
        return (
            <div>
                <ul>
                    <li>二级路由1的Message组件</li>
                    <li>tangzhenhao</li>
                </ul>
            </div>
        );
    }
}

export default Message;

New.index.js

import React, {Component} from 'react';

class Index extends Component {
    render() {
        return (
            <div>
                <li>二级路由2的Message组件</li>
                <li>汤汤汤 </li>
            </div>
        );
    }
}

export default Index;

Home.index.js

import React, {Component} from 'react';
import {BrowserRouter, Route, Link} from "react-router-dom";
import Message from "./Message";
import New from "./New";

class Home extends Component {
    render() {
        return (
            <div>
                <h3>我是一级路由2组件</h3>
                <BrowserRouter>
                    <ul>
                        <li>
                            <Link to="/erjifirst">二级路由1</Link>
                        </li>
                        <li>
                            <Link to="/jidsecond">二级路由2</Link>
                        </li>
                    </ul>
                    <Route path="/erjifirst" component={Message}></Route>
                    <Route path="/jidsecond" component={New}></Route>
                </BrowserRouter>
            </div>
        );
    }
}

export default Home;

App.js

import React, {Component} from 'react';
import {Route, BrowserRouter, Link} from "react-router-dom";
import About from "./About";
import Home from "./Home/index";

class App extends Component {
  render() {
    return (
        <BrowserRouter>
          <div>
            <ul>
              <li>
                <Link to="/zujianyi">一级路由1</Link>
              </li>
              <li>
                <Link to="/zujianer">一级路由2</Link>
              </li>
            </ul>

            <Route path="/zujianyi" exact children={() => <div>路由</div>} />
            <Route path="/zujianyi" component={About} />
            <Route path="/zujianer" component={Home} />
          </div>
        </BrowserRouter>
    );
  }
}

export default App;

App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))cd
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();