SO中文参考
首页
(current)
程序语言
c
java
python
c++
go
javascript
swift
c#
操作系统
linux
ubuntu
centos
unix
数据库
oracle
mysql
mongodb
postgresql
框架
node.js
angular
react-native
avalon
django
twisted
hadoop
.net
移动开发
android
ios
搜索
如何在React和symfony项目中管理路由?{% 块标题 %}</desc> <question vote="0"> <p>我使用 React 对 symfony 中的页面进行 vite 操作:</p> <p>这是基础:</p> <pre><code><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>{% block title %}Welcome!{% endblock %}</title> {# Run `composer require symfony/webpack-encore-bundle` and uncomment the following Encore helpers to start using Symfony UX #} <link rel="shortcut icon" type="image/x-icon" href="{{ asset('images/Logo 2.png') }}"> <meta name="viewport" content="width=device-width, initial-scale=1"> {% block stylesheets %} {{ vite_entry_link_tags('app') }} {% endblock %} <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet"> </head> <body> {% block body %}{% endblock %} {% block javascripts %} {{ vite_entry_script_tags('app') }} {% endblock %} </body> </html> </code></pre> <p>这是树枝:</p> <pre><code>{% extends 'base.html.twig' %} {% block title %}Reseau Sociaux{% endblock %} {% block body %} <div id="app"></div> {% endblock %} </code></pre> <p>这是控制器:</p> <pre><code>/** * @Route("/reseau-sociaux", name="reseau-sociaux_home") * @IsGranted("ROLE_USER") */ public function reseauSociaux(Request $request) { return $this->render('reseauSociaux/reseauSociaux.html.twig'); } </code></pre> <p>这是我的反应:</p> <pre><code>import React from "react"; import { createRoot } from 'react-dom/client'; import Actualite from './pageActualite/Actualite' import './styles/app.css'; import { BrowserRouter, Routes, Route } from "react-router-dom"; import ProfilUser from "./otherPages/ProfilUser/ProfilUser"; const App = () => { return ( <BrowserRouter> <Routes> <Route path="reseau-sociaux" element={<Actualite />}/> <Route path="/reseau-sociaux/profil" element={<ProfilUser />}/> </Routes> </BrowserRouter> ); } const rootElement = document.querySelector('#app'); const root = createRoot(rootElement); root.render(<App />); </code></pre> <p>问题是<strong>route</strong>,react-router-dom运行良好,但是如果我刷新页面,错误是:找不到路由,来自symfony的错误。例如,如果我刷新 /reseau-sociaux/profile 页面,我会收到错误,因为我的 symfony 中没有路由 /reseau-sociaux/profil。</p> <p>我也有其他树枝页面,但它们效果很好</p> </question> <answer tick="false" vote="0"> <p>当然...如果你将路线从<pre><code>/reseau-sociaux</code></pre>延伸到<pre><code>/reseau-sociaux/profil</code></pre>,那就是symfony路线不匹配。你必须 symfony 告诉你的路线可以有子路径。</p> <p>您可以更改路由参数以匹配子路径,例如</p> <pre><code>/** * @Route("/reseau-sociaux/{sub}", name="reseau-sociaux_home", requirements={"sub"=".+"}) * @IsGranted("ROLE_USER") */ public function reseauSociaux(Request $request, ?string $sub = null) { return $this->render('reseauSociaux/reseauSociaux.html.twig'); } </code></pre> </answer> </body></html>
问题描述
投票:0
回答:0
reactjs
symfony
twig
react-router-dom
vite
最新问题
递归合并两个数组并保留键
Azure 数据资源管理器仪表板自动化
如何忽略 Playwright 中的特定文件夹及其子文件夹
如何在 subprocess.Popen() 中使用现有的环境变量
获取代理ip地址使用scrapy进行爬取
合并两个通过共享列值相关的二维数组中的行
如何调试大型 Qt 应用程序中的瓶颈?
没有 sudo 就无法“docker ps” - 即使将我的帐户添加到 docker 组之后
如何使用 esbuild.context 触发第一次构建
在flutter应用程序的gradle文件中指定依赖项的命名空间的最佳实践
scipy 的快速傅里叶逆变换 (ifft2) 不适用于傅里叶光学
如何在具有基于值的隐式列的 Power BI 矩阵可视化中显示列总计?
如何在 Angular 中使用 ProvideAppInitializer 动态更改 PrimeNG 预设?
合并由第一级键相关的两个二维数组中的行数据
未发现已安装 Jupyter Lab Torch 模块
DefaultAzureCredential 在尝试使用托管身份获取访问令牌时无法从包含的凭据中检索令牌
PHP 合并 2 个具有相同键的数组
如何使用 Excel 或 Google Sheet 中的函数脚本将波斯 (Shamsi) 日期转换为公历 (Miladi) 日期?
如何设置HStack子级对齐方式不同
SimpleNamespace 是否有类型提示?
© www.soinside.com 2019 - 2024. All rights reserved.