Блог

Я просто застрял на этой концепции маршрутизатора. Я довольно новичок в react. ПОЭТОМУ я думаю, что у нас также есть лучший способ сделать это. Поправьте меня, если я делаю это неправильно или если у нас есть лучший вариант.

Это мой App.js

 import React from 'react';
import './App.css';
import Header from './Header';
import Profile from './Profile';
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import PullRequests from './PullRequests';
import Overview from "./Overview";
import Repo from './Repo';

function App() {
  return (

    <Router>
    <div className="App">
      <Header />

      <Switch>

      <Route path="/">
        <Profile template= {<Overview/>} />
      </Route>

      <Route path="/tagname=Repo">
        <Profile template= {<Repo/>} />
      </Route>

      <Route path="/Pullrequests">
        <PullRequests />
      </Route>

      </Switch>
      
    </div>
    </Router>

  );
}

export default App;

  

Это мой profile.js

 import React from 'react'
import "./Profile.css"
import { Avatar} from '@material-ui/core';
import PeopleAltIcon from '@material-ui/icons/PeopleAlt';
import StarBorderIcon from '@material-ui/icons/StarBorder';
import LocationOnIcon from '@material-ui/icons/LocationOn';
import Underlinenav from './Underlinenav';


function Profile({template}) {


    return (
        <div className="profile">

                <div className="profile__left">

                    <Avatar src="https://avatars0.githubusercontent.com/u/68982304?s=460amp;u=6b37f00eb36173e0f5f5bc04db9e63066d408d80amp;v=4" className="profile__avatar"/>

                    <div className="profile__name">
                    <span><h4>Shivansh Sharma</h4></span>
                    <span><p>shivkaansh</p></span>
                    </div>
                
                    <button>Edit profile</button>

                    <div className="profile_leftFollow">

                        <div className="profile__options">
                        <span>< PeopleAltIcon fontSize="small" /></span>
                        <span>1 follower</span>
                        </div>

                        <p>4 following</p>
                        
                        <div className="profile__options">
                        <span>< StarBorderIcon fontSize="small"/></span>
                        <span>3</span>
                        </div>

                    </div>

                    <div className="profile_leftLoc">
                        <span>< LocationOnIcon fontSize="small" /></span>
                        <span>India</span>      
                    </div>

                </div>
                <div className="profile__right">

                <div className="profile__rightupper">
                <Underlinenav/>

                </div> 

                {template}

                </div>
            </div>
    )
}

export default Profile

  

Я использовал шаблон с именем prop для маршрутизации компонента в profile.js для переключения между компонентами внутри корпуса. Но я думаю, что это работает не так, как ожидалось,

Я хочу, чтобы компонент Overview.js on path http://localhost:3000/ и Repo.js on http://localhost:3000/tagname=Repo

Используйте атрибут render и функцию промежуточного программного обеспечения для возврата правильного компонента

 <Route 
  path="/" 
  render={({location}) => {
      const template = checkYourRoute(location) ? Overview : Repo;
      return <Profile template={template} />
    }
  }
>