生成多个链接（URL）以显示我的反应应用程序的不同状态

Question

我用 React 创建了一个单页应用程序并将其托管在 netlify 上。我正在使用 react-router 来处理我的路由。是否可以生成随机路由 (url) 作为 link 发送给某人以查看我的应用程序的当前状态和特定数据？

例如： wwww.forexample.com/myappshowing5dogs --显示我的应用程序显示 5 只狗 wwww.forexample.com/myappshowing12catssandabook --shows my app 显示我的应用程序的不同状态，有 12 只猫和一本书

如何生成 links (url) 来显示我的应用程序的所有无数种可能状态？

Answer 1

您可以使用 React-Router 的 useParams 功能来做到这一点！

import {BrowserRouter, Route, useParams} from ReactRouterDOM

const Info = () => {
  let {dogs, cats} = useParams();
  return <div>There are {dogs || 0} dogs and {cats || 0} cats</div>;
  }

const App = () => (
  <BrowserRouter>
    <Route  path="/:dogs?/:cats?/"  component={Info}/>
  </BrowserRouter>)

ReactDOM.render(<App/>, document.getElementById('root'));

为了让 Netlify 与这些很好地协同工作，您需要将 /* /index.html 200 添加到您的 _redirects 文件中。

查看我的演示 here：

Sourcecode 显示如何执行重定向文件和路由

生成多个链接（URL）以显示我的反应应用程序的不同状态

Generating multiple links (URL) to display different states of my react App

reactjs

react-router

netlify