react router

سلام
میشه کد رو بزاری تا ببینیم داستان چیه؟

سعی کن از سیمپل کد هایی که تو نت هست رو همینجوری استفاده نکنی و خودت با آگاهی بنویسی.

@mohsen.fallah65
واسا یکم دیگه زور بزنم اگ ب نتیجه نرسیدم بعد

@mohsen.fallah65

import './App.css';
import { BrowserRouter as Router , Link , Route} from "react-router-dom";

class Header extends Component {
    render() {
        return (
            <Router>
            <div className="Header">
                <ul>
                    <li>خانه</li>
                    <li> اخبار و مقالات</li>
                    <li>آژانس های همکار</li>
                    <li>کارشناسان</li>
                </ul>
                <ul className="second-ul">
                    <li>ثبت نام</li>
                    <li>|</li>
                    <li>ورود</li>
                    <li className="experts-panel">پنل کارشناسان</li>
                    <li>آیکون مثلا</li>
                </ul>

            </div>

            </Router>
        );
    }
}

export default Header;

این کدشه مثلا
بعد میخوام جای اون <li>خانه</li>
وقتی کاربر رو خانه کلیک کرد بره به کامپوننت مورد نظرم !

سلام
یه نگاه به این کد ها بکن
این یه پروژه کوچیکه که کار میکنه و برای تست شما نوشتم

//---------------------------- index.js ----------------------------------------------
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import {BrowserRouter} from 'react-router-dom'

render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root'));

//-------------------------- App.js ---------------------------------
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Route} from "react-router-dom";

import Header from "./components/sections/Header";

import Home from "./components/Home";
import About from "./components/About";
import Tools from "./components/Tools";

export default class App extends Component {
    render() {
        return (
            <div>
                <Header/>
                <div className="container">
                    <div style={{paddingTop: 60}}>
                        <Route path='/' exact={true} component={Home}/>
                        <Route path='/about' component={About}/>
                        <Route path='/tools' component={Tools}/>
                    </div>

                </div>
            </div>
        )
    }
}

//------------------------- header.js -------------------------------------
import React, {Component} from 'react'
import {Link} from 'react-router-dom'
export default class Header extends Component {
    render() {
        return (
            <div>
                <nav className="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
                    <div className="collapse navbar-collapse" id="navbarCollapse">
                        <ul className="navbar-nav mr-auto">
                            <li className="nav-item">
                                <Link className="nav-link" to="/">home</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/about">about</Link>
                            </li>
                            <li className="nav-item">
                                <Link className="nav-link" to="/tools">tools</Link>
                            </li>
                        </ul>
                    </div>
                </nav>
            </div>
        )
    }
}
//-------------------------------- home.js -----------------------------------------------------
import React,{Component} from 'react'
export default class Home extends Component{
    render(){
        return(
            <div>
                <h1>home</h1>
            </div>
        )
    }
}
//------------------------------ about.js -------------------------------
import React,{Component} from 'react'
export default class About extends Component{
    render(){
        return(
            <div>
                <h1>About</h1>
            </div>
        )
    }
}
//-------------------------------- tools.js -----------------------------------
import React,{Component} from 'react'
export default class Tools extends Component{
    render(){
        return(
            <div>
                <h1>Tools</h1>
            </div>
        )
    }
}

@rasoolkareshki

موفق باشید

@mohsen.fallah65 آقا آی دی تلگراموتون میدین لطفا ؟