Javascript 如何在同一页面中呈现基于按钮单击的同一页面的不同部分的动态组件？

我正在使用react with material ui创建仪表板类型的应用程序。在仪表板主页中，有三个部分，一个用于项目，一个用于项目摘要部分，另一个用于通知。我想要这样的功能，当我在“项目”部分单击其中一个项目时，项目详细信息将呈现在仪表板的“项目摘要”部分的同一页面上

我尝试了

react router dom的
Route

这里是项目仪表板图像


这是我的项目代码

 <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>

setElevation（1）}
onMouseOver={（）=>setElevation（5）}
标高={标高}
onClick={（）=>警报（`project clicked${projectName}`）}
>
{projectName}
纸可以用来建造表面。

这是我在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 }
          }} />
       )
      }
     /> 
}

export const PrivateRoute=（{component:component，…rest}）=>{
返回
localStorage.getItem（'authToken'）(
) : (
)
}
/> 
}
据我所知，您希望根据项目名称实施项目详细信息

对于这种实现，可以使用TABS（）而不是routes。要垂直对齐，可以使用选项卡组件中的垂直部分。当您想重定向到其他页面时，应该使用路由。
侧栏使用react-router-dom的reactjs中的示例应用程序

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")
);

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>
  );
}

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;
}