Как визуализировать динамический компонент на одной странице на основе нажатия кнопки из другого раздела той же страницы?

Question

Я работаю над реакцией с material-ui, создавая приложение типа панели инструментов. На домашней странице панели мониторинга есть три раздела: 1 для проектов и 1 для сводной секции проектов, а другой - для уведомлений. Мне нужна такая функциональность, как, когда я щелкаю один из проектов в разделе проекта, и детали проекта будут отображаться на той же странице в разделе сводки проекта на панели инструментов.

я пробовал Route из react-router-dom

здесь изображение панели проекта

Вот мой код проекта

 <Project  elevation={elevation1} setElevation={setElevation1} projectName="BMW S17" />

Один компонент проекта

 <Paper className={classes.pen} 
                style={{ background: 'linear-gradient(to right, #00b4db, #0083b0)' }}
                onMouseOut={ () => setElevation(1) }
                onMouseOver={ () => setElevation(5) }
                elevation={elevation}
                onClick={() => alert(`project clicked ${projectName}`)}
              >
                <Typography variant="h6" component="h3" className={classes.title}>
                    { projectName }
                </Typography>
                <Typography style={{ color: "#fff" }}>
                    Paper can be used to build surface.
                </Typography>
            </Paper>

Вот мои маршруты в app.js

 <BrowserRouter>
        <Switch>
            <Route path="/" exact component={Welcome} />
            <Route path="/login" exact component={Login} />
            <Route path="/signup" exact component={Signup} />
            <Main>
               <PrivateRoute exact path="/dashboard" component={Dashboard} />
               <PrivateRoute path="/profile" component={Profile} />
            </Main>
        </Switch>
      </BrowserRouter> 

Мой личный номер ..

export const PrivateRoute = ({ component: Component, ...rest }) => {
    return <Route 
     { ...rest }
     render={props => 
      localStorage.getItem('authToken') ? (
        <Component { ...props } />
      ) : (
          <Redirect 
            to={{ 
              pathname: "/login",
              state: { from: props.location }
          }} />
       )
      }
     /> 
}

Answer 1

Боковая панель пример приложения в реагировании с использованием react-router-dom

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import "./styles.css";
import Header from "./Header";
const Home = () => (
  <div className="rightside">
    <h1>Home Page</h1>
  </div>
);
const About = () => (
  <div className="rightside">
    <h1>About Page</h1>
  </div>
);
const Product = () => (
  <div className="rightside">
    <h1>Product Page</h1>
  </div>
);
const Contact = () => (
  <div className="rightside">
    <h1>Contact Page</h1>
  </div>
);
const headerStyle = {
  padding: 10,
  background: "darkcyan"
};
ReactDOM.render(
  <Router>
    <header style={headerStyle}>Header</header>
    <div className="main">
      <Header />
      <Switch>
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/product" component={Product} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Home} />
      </Switch>
    </div>
  </Router>,
  document.getElementById("root")
);

Header.js

import React from "react";
import { NavLink } from "react-router-dom";
import "./styles.css";
export default function Header() {
  return (
    <div className="leftside">
      <ul>
        <li><NavLink to="/home">Home</NavLink></li>
        <li><NavLink to="/about">About</NavLink></li>
        <li><NavLink to="/product">Product</NavLink></li>
        <li><NavLink to="/contact">Contact</NavLink></li>
      </ul>
    </div>
  );
}

styles.css

body {
  margin: 0;
  padding: 0;
}
.main {
  display: flex;
  height: 100vh;
}
.leftside {
  background: darkgrey;
}
.rightside {
}
.leftside ul {
  list-style-type: none;
  padding: 0;
}
.leftside ul li a {
  color: white;
  text-decoration: none;
}
.leftside ul li {
  padding: 5px 10px;
  background: black;
  margin: 1px 0px;
}
.leftside ul li:hover {
  background: darkcyan;
  color: white;
}

Answer 2

Как я понял, вы хотите реализовать детали проекта на основе имени проекта.

Для реализации такого рода вы можете использовать TABS (https://material -ui.com / components / tabs/ ) а не маршруты. Для выравнивания по вертикали вы можете использовать вертикальный разрез в компоненте вкладок. Маршрут следует использовать, если вы хотите перенаправить на другую страницу.