使用 React Router 为多个变量创建路由答案

【问题标题】：Make Route for multiple variables using React Router使用 React Router 为多个变量创建路由
【发布时间】：2021-06-28 03:29:00
【问题描述】：

我正在尝试使用 React Router 制作多个关于某些游戏角色的页面

对于多个页面，我想从 firebase 加载数据并将数据插入页面。

所有字符页面格式相同，只需要更改详细数据

例如，

我们有

字符'a'：年龄：12，性别：男性字符“b”：年龄：13，性别：女性

每个角色页面都需要显示加载数据的角色数据

我需要在一页只显示一个字符的数据。

这是我关于路由的代码

function App() {
    useEffect(() => {
        async function getFromDocs() {
            const data = await db
                .collection('Character')
                .doc(curChar)
                .get()
                .then((snap) => {
                    return snap.data() as CharProps;
                });
            setData(data);
        }
        getFromDocs();
    }, [curChar]);
    const onCharChange = (text: string) => {
        setCurChar(text);
    };
    return (
        <>
            <title>Tekken_info 0.1.0</title>
            <GlobalStyle />
            <Wrapper>
                <PageContent>
                    <Switch>
                        <Route path="/" exact={true} component={Home} />

                        <Route path="/Data" exact={true}>
                            <Page data={data} />
                        </Route>
                    </Switch>
                </PageContent>
            </Wrapper>
        </>
    );
}

export default App;

但是我暂时做的不是很满意……

我使用 useState 加载字符数据并将其加载到“/Data”页面

我认为这不是好方法，我想为角色制作一条路线。

例如

当我们访问 '/a' 时，加载有关仅 'a' 的数据....

如果你对我的描述和问题有什么不明白的地方

告诉我

【问题讨论】：

标签： reactjs firebase google-cloud-firestore react-router

【解决方案1】：

您可以将 useEffect 移动到页面本身，而不是将数据作为道具传递给 Page 组件。这样只有 curChar 是一个路由路径变量，并且可以在页面内部访问，例如：

/Data/curChar

改变路径

path="/Data/:curChar"

页面内

const Page = () => {

  let {
    curChar
  } = useParams();

  //move the useEffect here.
  useEffect(() => {
    async function getFromDocs() {
      const data = await db
        .collection('Character')
        .doc(curChar)
        .get()
        .then((snap) => {
          return snap.data() as CharProps;
        });
      setData(data);
    }
    getFromDocs();
  }, [curChar]);

  return <div > Now showing details of {
    curChar
  } < /div>;

}

【讨论】：