Json 如何在带有firebase db的ReactJS上使用动态路由，通过单个页面上的id传递不同的数据？

我为每个用户显示了一个视图按钮。当我单击它们时，我希望被重定向到一个带有“users/{Id of the viewsed user}”url的页面，并仅显示我单击的用户的数据（Id、姓名、联系人、电子邮件）

现在，当我点击查看按钮时，我得到了我想要的url，但我被重定向到我的404页面。“/users”url将显示所有现有用户数据，但找不到“/users/id”

这是我的viewUser页面

const ViewUser = (props, id) => {

  fetch(`firebaseurl/users/${id}.json`);
  console.log(id)

  return (
    <Fragment>
      {props.users.map((users) => ( 
              <div className='view-div'>
                <h3>ID: {users.id}</h3>
                <h3>NAME: {users.name}</h3>
                <h3>CONTACT: {users.phone}</h3>
                <h3>EMAIL: {users.email}</h3>
                </div>
      ))} </Fragment>
  );
}
export default ViewUser;```

**Here is the UsersList page where I have my view button**

`import { Fragment } from "react";
import { Table } from "react-bootstrap"
import UsersHeader from "./UsersHeader"


const UserList = (props) => {
    async function editHandler(id) {
        const response = await fetch(`firebaseurl/users/${id}.json`, {
            method: 'POST',
            body: JSON.stringify(id),
            headers: {
                'Content-Type': 'application/json/users'
            }
        });
        const data = await response.json();
        console.log(data);

    }
    function viewHandler(id) {
        fetch(`firebaseurl/users/${id}.json`);
        console.log(id)

        return (
            <Fragment>
                {props.users.map((users) => (
                    <div>
                        <h3>{users.id}</h3>
                        <h3>{users.name}</h3>
                        <h3>{users.phone}</h3>
                        <h3>{users.email}</h3>
                    </div>
                ))} </Fragment>
        );

    }
    function deleteHandler(id) {
        fetch(`firebaseurl/users/${id}.json`, { method: 'DELETE' });
        console.log(id)
    }
    return (
        <Table className={'user-table'} striped bordered hover>
            <UsersHeader />
            {props.users.map((users) => (

                <tbody >
                    <tr key={users.id}>
                        <td>{users.id}</td>
                        <td>{users.name}</td>
                        <td>{users.phone}</td>
                        <td>{users.email}</td>
                        <td className={'last-column'}>
                            <a href={`/users/${users.id}`} onClick={() => viewHandler(users.id)} className={'first-button'}>View</a>
                            <button onClick={() => editHandler(users.id)} className={'last-button'}>Edit</button>
                            <button onClick={() => deleteHandler(users.id)} className={'last-button'}>Delete</button>
                        </td>
                    </tr>
                </tbody>

            ))}

        </Table>
    );
};

export default UserList;`


**and here is my App page where I have my ViewUser page.** 

`import UserForm from './components/UserForm';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Fragment, useCallback, useEffect, useState } from 'react';
import UserList from './components/UserList';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import ViewUser from './Pages/ViewUser';
import EmptyPage from './Pages/PageNotFound';
import Home from './Pages/Home';

function App() {
  const [users, setUsers] = useState([]);


  const DisplayUser = useCallback(async () => {

    const response = await fetch('firebaseurl/users.json');
    const data = await response.json();
    const loadedUsers = [];

    for (const key in data) {
      loadedUsers.push({
        id: key,
        name: data[key].name,
        phone: data[key].phone,
        email: data[key].email,

      });

    }
    setUsers(loadedUsers);
  }, []);

  useEffect(() => {
    if (users)
      DisplayUser();
  }, [users]);



  return (
    <div className="app">
      <Fragment>
        <Router>
          <Switch>
            <Route exact path={`/users`}>
              <ViewUser state={users}users={users}></ViewUser>
            </Route>
            <Route exact path="/">
              <Home />
            </Route>
            <Route component={EmptyPage} />
          </Switch>
        </Router>

      </Fragment>
    </div>

  );
}

export default App;
`


I know its a mess, Im a newbie in reactJS.

const ViewUser=（道具，id）=>{
fetch（`firebaseurl/users/${id}.json`）；
控制台日志（id）
返回(
{props.users.map（（users）=>（
ID:{users.ID}
名称：{users.NAME}
联系人：{users.phone}
电子邮件：{users.EMAIL}
))} 
);
}
导出默认视图用户```
**这是UsersList页面，在这里我有我的查看按钮**
`从“react”导入{Fragment}；
从“react bootstrap”导入{Table}
从“/UsersHeader”导入UsersHeader
常量用户列表=（道具）=>{
异步函数editHandler（id）{
const response=wait fetch（`firebaseurl/users/${id}.json`{
方法：“POST”，
正文：JSON.stringify（id），
标题：{
“内容类型”：“应用程序/json/users”
}
});
const data=wait response.json（）；
控制台日志（数据）；
}
函数viewHandler（id）{
fetch（`firebaseurl/users/${id}.json`）；
控制台日志（id）
返回(
{props.users.map（（用户）=>(
{users.id}
{users.name}
{users.phone}
{users.email}
))} 
);
}
函数deleteHandler（id）{
fetch（`firebaseurl/users/${id}.json`，{method:'DELETE'}）；
控制台日志（id）
}
返回(
{props.users.map（（用户）=>(
{users.id}
{users.name}
{users.phone}
{users.email}
editHandler（users.id）}className={'last-button'}>Edit
deleteHandler（users.id）}className={'last-button'}>Delete
))}
);
};
导出默认用户列表`
**这是我的应用程序页面，其中有我的ViewUser页面。**
`从“./components/UserForm”导入UserForm；
导入'bootstrap/dist/css/bootstrap.min.css'；
从“react”导入{Fragment，useCallback，useEffect，useState}；
从“./components/UserList”导入用户列表；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch}；
从“./Pages/ViewUser”导入ViewUser；
从“/Pages/PageNotFound”导入EmptyPage；
从“./Pages/Home”导入主页；
函数App（）{
const[users，setUsers]=useState（[]）；
const DisplayUser=useCallback（异步（）=>{
const response=wait fetch（'firebaseurl/users.json'）；
const data=wait response.json（）；
常量loadedUsers=[]；
for（常量输入数据）{
加载用户推送({
id:钥匙，
名称：数据[键]。名称，
电话：数据[键]。电话，
电子邮件：数据[键]。电子邮件，
});
}
设置用户（loadedUsers）；
}, []);
useffect（（）=>{
如果（用户）
DisplayUser（）；
}，[用户]；
返回(
);
}
导出默认应用程序；
`
我知道这很糟糕，我是个新手。