Laravel + React路由与react-router-dom
Laravel是一种流行的PHP开发框架，而React是一种流行的JavaScript库，用于构建用户界面。在使用Laravel和React进行开发时，可以使用react-router-dom来处理路由。
React Router是React官方提供的用于处理前端路由的库。它提供了一种简单而强大的方式来管理应用程序的不同页面之间的导航。react-router-dom是React Router库的一个扩展，专门用于在Web应用程序中处理路由。
使用Laravel和React进行开发时，可以通过react-router-dom来定义和管理应用程序的路由。它提供了一些核心组件，如BrowserRouter、Route和Link，用于定义路由规则和导航链接。
- BrowserRouter是react-router-dom提供的一个高级组件，用于包裹整个应用程序，以便在浏览器中处理路由。
- Route组件用于定义特定路径的路由规则，并指定对应的组件。
- Link组件用于创建导航链接，使用户能够在应用程序的不同页面之间进行导航。
使用Laravel和React进行开发时，可以根据具体需求来配置和使用react-router-dom。例如，可以在Laravel的路由文件中定义API路由，然后在React组件中使用react-router-dom来定义前端路由。
React Router的优势包括：
- 简单易用：React Router提供了一种简单而直观的方式来处理前端路由，使开发者能够轻松地管理应用程序的不同页面之间的导航。
- 强大灵活：React Router提供了丰富的路由配置选项，可以满足各种复杂的路由需求，如嵌套路由、动态路由等。
- 组件化开发：React Router的路由规则和导航链接都是以组件的形式存在，可以与React的组件化开发模式很好地结合，使代码更加模块化和可维护。
在使用Laravel和React进行开发时，可以结合腾讯云的相关产品来提升开发和部署的效率。以下是一些推荐的腾讯云产品和产品介绍链接地址：
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，用于部署和运行Laravel和React应用程序。详情请参考：腾讯云服务器
- 腾讯云对象存储（COS）：提供安全可靠的对象存储服务，用于存储和管理应用程序的静态资源文件，如图片、视频等。详情请参考：腾讯云对象存储
- 腾讯云数据库（TencentDB）：提供高性能、可扩展的数据库服务，用于存储和管理应用程序的数据。详情请参考：腾讯云数据库
- 腾讯云CDN（Content Delivery Network）：提供全球加速的内容分发网络，用于加速应用程序的静态资源文件的传输和访问。详情请参考：腾讯云CDN
请注意，以上推荐的腾讯云产品仅供参考，具体选择和配置应根据实际需求和项目要求进行。
相关·内容
我对laravel路线有问题，我制作了一个使用react-router-dom的多个反应项目，我希望它们在一个项目构建上是分开的。
下面是webpack的设置，以生成两个分别的react项目文件夹：
mix.webpackConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, 'resources', 'js'),
'@admin': path.resolve(__dirname, 'resources'
浏览 2提问于2022-02-27得票数 0
我正在尝试使用react- router -dom进行路由，但是我的URL正在更新，但是页面没有路由到我指定的组件。这是我的App.js
import "./App.css";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Menu from "./layouts/Menu";
import Dashboard from "./layouts/Dashboard";
import Content from "./layouts
浏览 1提问于2021-03-29得票数 1
我要创建一个应用程序，利用反应-路由器-多姆。我目前正在尝试我们的外翻5.2.0。我试图孤立这个问题，并集中精力使路由工作，但尚未成功。我用npx创建反应应用程序制作了这个应用程序。
Package.json
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.2.0",
"@testing-library/user-event": "^13.5.0",
"react&#
浏览 8提问于2022-05-12得票数 3
我试图理解使用路由器和在React路由器中切换之间的区别。
但我不明白为什么在下面的示例中使用Switch有效：
import { BrowserRouter, Route, Switch } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
浏览 8提问于2021-02-22得票数 8
我有Quotes组件，它包含引号列表。当我单击单个列表元素时，reason路由器动态地更改url并在完整的页面(即Full_Screen_Quotes )中打开它，然后再次在Full_Screen_Quotes中添加Comments部分，在reason路由器的帮助下单击按钮上的Comments部分，但由于不知道的原因，它无法工作。可能是什么原因？
import { useParams } from "react-router-dom/cjs/react-router-dom.min"
import Comments from "./Comments"
impor
浏览 18提问于2022-01-17得票数 1
1回答
在这里，我试图在我的反应应用中实现路由概念。但我面对的问题和问题是，URL链接在浏览器的url部分发生变化，而页面内容却没有变化。但是当我刷新链接时，就会呈现新的内容。
App.js
import React from 'react'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import Dashboard1 from './Dashboard1';
import Dashboard2 from './Dashboard2';
functio
浏览 6提问于2022-05-04得票数 0
2回答
我不能在反应性路由器(特别是react-router-dom). )中使用“交换机”或“路由”。由于对于使用哪一种方法( Switch还是Routes )似乎有点困惑，所以我决定尝试这两种方法，以达到目的。
我使用的是react路由器-dom版本：
"react-router-dom": "^6.2.1",
如果我这样进口：
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
编译器说Cannot resolve symbol 'Routes&
浏览 15提问于2022-01-11得票数 5
我使用react、react-router、react-redux、connected-react-router创建了一个应用程序，我的结构如下： - app
- admin
- category
- categoryList
- categoryAdd 我的想法是执行以下应用流程： /admin -> /admin/category -> /admin/category/add 但是由于某种原因，我看不到呈现的最后一个组件(CategoryAdd)。 代码(最后的沙盒链接)： index.js import React from "r
浏览 21提问于2019-06-23得票数 0
回答已采纳
我安装了react-router-dom并使用以下代码进行路由，但我有错误：
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, Switch } from 'react-router-dom';
class Home extends React.Component{
render(){
return(
<h1>Home</h1>
);
}
}
浏览 1提问于2017-12-21得票数 3
3回答
我刚刚安装了react-router-dom，现在我正在尝试写这一行。
import {BrowserRouter as Router, Link, Switch, Route} from 'react-router-dom';
成功地导入了BrowserRouter和Link。但是，我在导入Switch和Route时遇到了问题。这些不是进口的。FYI，我已经安装了react-router-dom的最新版本，即5.2.0。我在WebStorm遇到了这个问题。在VS代码中，它可以很好地工作。
浏览 4提问于2020-06-14得票数 1
1回答
Laravel反应认证
、、、、
我是新的反应，我想要实现的是用户登录使用react组件在laravel。
我遵循这一点，我安装了everything.When，我正在运行这个项目，我似乎遇到了道具方面的错误。终端要求我更新我已经更新过的react和react dom。
react@16.2.0；react-dom@16.2.1，Laravel 5.8；NPM6.4.1
import LoginContainer from './LoginContainer';
import {withRouter} from "react-router-dom";
class Login extends C
浏览 4提问于2019-09-30得票数 0
我正在react-application中实现路由。我对react-router 4.0比react-router-redux的优点感到困惑。我也被react-router-dom搞糊涂了。
react-router-redux、react-router 4.0和react-router-dom的优缺点是什么？
浏览 1提问于2017-04-03得票数 36
回答已采纳
在React-路由器中，我看到它已经从react-router-dom导入了Route和Router模块。我想知道这两个模块有什么不同？
浏览 2提问于2017-05-13得票数 7
我用React路由器和Laravel。当我浏览链接元素时，一切正常，但当我更改浏览器地址行手动显示另一个组件时，Laravel会显示它删除404页。
这是默认的web.php内容，在welcome.blade.php i inlcude /app.js文件中：
Route::get('/', function () {
return view('welcome');
});
这是我的App.js内容：
import React from 'react';
import { Switch, Route } from "react-ro
浏览 3提问于2020-11-02得票数 1
回答已采纳
我正在学习react，并尝试使用react-router-dom设置路由。除默认路由外，所有路由都工作正常。当我导航到默认管线组件的管线时，默认管线组件的内容将显示在所有其他组件上。下面是代码和输出
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import One from './one';
import Two from './two&
浏览 0提问于2018-02-27得票数 3
2回答
当我设置并通过路由进行更改时，路由就会继续添加Infront。
示例：-如果我在http://localhost:3001/login页面上，并单击“注册链接”，则在前面添加register路由，如==> http://localhost:3001/login/register
有人能告诉我我做错了什么吗？
码
App.js
import "./App.scss";
import { Routes, Switch, Route } from "react-router-dom";
import Home from "./components/Ho
浏览 4提问于2022-07-02得票数 1
回答已采纳
当试图从useNavigate导入react-router-dom时，我得到以下错误：
Attempted import error: 'useNavigate' is not exported from 'react-router-dom'.
我的导入语句：
import { useNavigate } from 'react-router-dom';
浏览 3提问于2020-10-06得票数 12
回答已采纳
在使用react路由器时，我将导入useNavigate，v6 "react-router-dom": "^6.3.0"如下：
import { useNavigate } from 'react-router-dom';
在函数中，我使用以下代码导航：
{
title: (
<FormattedMessage
id="pages.apps.cruise.channel.searchTable.subName"
defaultMessage="Rul
浏览 10提问于2022-04-30得票数 -1
import { ConnectedRouter } from 'connected-react-router/immutable';
import { BrowserRouter as Router,} from 'react-router-dom';
我需要知道他们两者之间的区别。
浏览 3提问于2018-12-27得票数 7
2回答
误差
node_modules/@types/react-router-dom/index.d.ts:13:10 - error TS2305: Module '"react-router"' has no exported member 'match'.
node_modules/@types/react-router-dom/index.d.ts:19:5 - error TS2305: Module '"react-router"' has no exported member 'PromptProp
浏览 60提问于2021-12-13得票数 2
回答已采纳
我正在学习如何从useMatch()中使用"react-router-dom"，我得到了下面的错误，我的网页是空的：
Uncaught TypeError: Cannot read properties of undefined (reading 'path')
at matchPath (index.tsx:1148)
at index.tsx:481
at mountMemo (react-dom.development.js:15846)
at Object.useMemo (react-dom.development.js
浏览 35提问于2021-12-22得票数 2
回答已采纳
2回答
我试着做一个海军酒吧，但并不是重定向到给定的页面。如果我单击Navbar中的任何链接，它将更改url栏中的路径，但不会重定向到该页面。我不确定我是不是错过了什么。当我用标签代替它时，它工作得很完美。
Navbar.js
import React from "react";
import { BrowserRouter as Router, Link, Switch } from "react-router-dom";
const Navbar = () => {
return (
<Router>
<Switch
浏览 3提问于2020-05-25得票数 0
回答已采纳
1回答
我正在尝试使用路由路由组件，但它引发了以下错误：
ts类型'{ path："/:shortname"；组件: Type to；}‘不能分配到键入'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{子代？：ReactNode；}> &Rea.’。
下面是我的路由配置：
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
<Router&g
浏览 1提问于2018-01-19得票数 2
1回答
我在导航到结帐页面时遇到了麻烦。每当我点击应用程序中的篮子图标时，我可以看到URL正在改变，但是页面没有变化，我总是必须刷新页面才能进行导航，我也不知道为什么。
这是我的App.js代码：
import React from "react";
import './App.css';
import Header from './Header';
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route}
from "react-rou
浏览 7提问于2022-11-08得票数 1
回答已采纳
2回答
我试图显示我的“家庭”组件在我的反应项目通过反应-路由器-多姆。虽然我把你的语气做对了，我没有编译时错误，但是Home组件没有出现。你有什么主意吗？
App.js：
import Navbar from "./Components/Navbar";
import {
BrowserRouter,
Routes,
Route
} from "react-router-dom";
import Home from "./Pages/Home";
function App() {
return (
<div classN
浏览 16提问于2021-12-12得票数 0
3回答
我尝试使用react路由器-dom 4.0.0库。但是它给我带来了这个错误
未定义TypeError:无法读取未定义属性的“位置”
在browserHistore中似乎存在这个问题。在我使用react之前-路由器2.x.x和一切都很好。这是我的index.js
import 'babel-polyfill'
import React from 'react'
import { Router, hashHistory } from 'react-router-dom'
import { render } from 'react-do
浏览 7提问于2017-04-01得票数 12
回答已采纳
我正在为我的一个朋友项目升级反应性路由器版本。
事情是有两个反应-路由器-多玛。我是否需要同时移除它们，还是只删除其中的一个就可以了？
{
"name": "root",
"private": true,
"devDependencies": {
"@types/react-router-dom": "5.3.3",
},
"scripts": {
"start": "nx serve",
},
&#
浏览 6提问于2022-07-13得票数 1
回答已采纳
1回答
我正在使用react-router-dom版本6.4.0启动react项目，但无法为所有路由创建通用的标头。
App.js --这是我要添加RouterProvider的文件
import logo from './logo.svg';
import './App.css';
import { Link, Outlet, RouterProvider } from "react-router-dom";
import { routers } from "./routes/routes";
function App() {
r
浏览 18提问于2022-09-21得票数 4
回答已采纳
2回答
我正在做一个谷歌克隆(迷你项目)，为此，我需要从react-router-dom导入react-router-dom。
我遵循以下步骤：
步骤1：npm install --save react-router-dom (我在终端中使用了此命令)步骤2：import { useHistory } from "react-router-dom" (在文件顶部使用此命令)步骤3：const history = useHistory() (在代码中使用此命令)
在执行以下步骤后，我将得到以下错误：
出口'useHistory‘(作为’useHistory‘进口)在’react路
浏览 11提问于2022-10-27得票数 3
回答已采纳
我想使用来自react-router-dom的react-router-dom，但是我得到了以下错误：
Error: useNavigation must be used within a data router.
See https://reactrouter.com/en/main/routers/picking-a-router.
NavBar
src/components/NavBar.js:6
3 | import { useNavigation } from "react-router-dom";
4 |
5 | function NavBar()
浏览 9提问于2022-11-04得票数 1
回答已采纳
2回答
我有这个问题，我不知道如何解决它，应用路由器有两个路由，公共(登录)和私有(DashboardRoutes)谁有其他路由。仪表板只加载第一个组件及其全部。
密码是
import React, { useEffect } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import {
BrowserRouter as Router,
Switch,
} from "react-router-dom&
浏览 5提问于2022-09-20得票数 1
我一直在尝试实现react-router-dom，但它似乎(潜在地)与Redux或Redux-persist发生冲突。我的index.js看起来像 import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Terms from './Terms'
import * as serviceWorker from './serviceWork
浏览 20提问于2020-01-20得票数 1
回答已采纳
我一直在与反应路由器工作，这只会给我带来麻烦。我想要一个按钮来加载一个新的页面，我想要的是有一个类来切换它的基于链接的呈现文件。我可能使用了错误的东西，但任何正确的方向上的推动都会很好。
这是我的三个主要文件
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import RouteFile from './RouteFile';
import reportWebVitals from '.
浏览 3提问于2021-04-09得票数 2
回答已采纳
我使用react-router-dom在我的React应用程序中路由。我的应用程序的一部分是在另一个包中提取的。依赖项列表如下所示：
./app/dashboard/package.json
{
"dependencies": {
"@app/components": "^1.0.0",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-router-dom": "^5.0
浏览 1提问于2019-04-06得票数 84
回答已采纳
我想删除6.0.2版。
npm list react-router-dom
zkzk1123@0.1.0 /Users/123/Desktop/
├─┬ @storybook/addon-links@6.4.8
│ └─┬ @storybook/router@6.4.8
│ └── react-router-dom@6.0.2
└── react-router-dom@5.3.0
我尝试了npm uninstall react-router-dom，npm uninstall react-router-dom@6.0.2，但是@5.3.0被删除了，但是@6.0.2没有，我该怎么办？我想把它
浏览 11提问于2021-12-08得票数 1
我在试着让一个反应路由器开始工作。这是我的密码：
var hashHistory = require('react-router-dom').hashHistory;
var BrowserRouter = require('react-router-dom').BrowserRouter;
var Route = require('react-router-dom').Route;
var ReactDOM = require('react-dom');
var React = require('react');
浏览 2提问于2017-06-02得票数 3
回答已采纳
import React from 'react';
import SearchDocument from './components/searchDocument';
import CreateRequest from './components/createRequest';
import { BrowserRouter as Router } from "react-router-dom";
import { Route, Switch } from 'react-router-dom';
class App
浏览 2提问于2018-04-19得票数 1
回答已采纳
4回答
我试图设置路由，但由于某种原因，它返回一个空白页，而不呈现任何内容。
我使用的是路由器版本6.3.0
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from "react-router-dom";
import './index.css';
import App from './App';
ReactDOM.render(
<React.StrictMo
浏览 13提问于2022-04-02得票数 0
回答已采纳
我正在使用来自的示例，但是我将它创建为一个单独的组件。我有Home和Errorpage组件。当我单击Foo、Bar或Baz时，它一直路由到错误页面，并且无法获得要显示的路由param值。我错过了什么吗？非常感谢，提前感谢。这就是它的样子；
//App.js
import React from 'react'
import style from './App.module.css';
import {Switch, Route, NavLink } from 'react-router-dom'
import Home from './c
浏览 0提问于2020-06-24得票数 0
回答已采纳
5回答
我有点新的反应，我正面临一个问题的路由器。当我直接在浏览器上输入URL时，路由工作，但是当我单击链接时，URL在浏览器上发生变化(例如，)，但是内容不会被更新(但是如果我进行刷新，它就会更新)。
这是我的github回购：
这是我的MainComponent.js
import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRo
浏览 1提问于2020-10-26得票数 2
回答已采纳
我正在尝试使用React路由器和路由，但是不断地得到这个错误：
我尝试了以下几点：
删除和重新安装react-router.deleting --路由器-dom和node_modules文件夹，并运行npm安装以确保react路由器和react-dom是相同的版本是的，我在上面列出的每一次尝试之后都重新启动了服务器。
以下是我的index.js代码：
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App fr
浏览 6提问于2021-06-08得票数 8
回答已采纳
当我在导航栏组件上使用link时，它会改变url但不会改变组件，但在我重新加载时它会改变组件，当我把link放在主app.js中时，它会完美地路由
app.js
import './App.css';
import Navbar from './Navbar/Navbar'
import About from './About/About'
import { Route, Link, BrowserRouter as Router ,Switch} from 'react-router-dom'
function App() {
浏览 1提问于2021-04-10得票数 0
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from 'history'
const history: History = createBrowserHistory({ basen
浏览 0提问于2019-08-08得票数 5
回答已采纳
1回答
基于id的反应路由
、、、、
我和react-router v6一起工作。我想要创建一个基于id的新路径。在我的主页"example.com"上，我有一些文章。我想为每一篇文章"example.com/{id}"创建一个详细的视图。我的方法是这样的：
App.tsx
import {
BrowserRouter,
Routes,
Route,
} from "react-router-dom";
import ProjectWrapper from "./components/ProjectWrapper";
import Home from &#
浏览 7提问于2022-09-06得票数 1
回答已采纳
2回答
我将通过以下方式导入路由 import {Routes, Route, BrowserRouter} from 'react-router-dom' 我的包JSON是"react-router-dom": "^6.0.2", ? 我正在使用Pycharm。 npm list react-router-dom返回-- react-router-dom@6.0.2 为什么会发生这种情况？我的前端是空白的。
浏览 213提问于2021-11-19得票数 8
1回答
反应嵌套路由不能正常工作
、、、、
我正在为Django应用程序创建前端。我想将我的应用程序组件路由到下面。
/
/dashboard
/about
/contact
那么仪表板组件应该路由为
/dashboard/
/dashboard/notification/
/dashboard/profile/
我成功地将我的App组件路由为
import React, { Component, Fragment } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Switch, Route,
浏览 2提问于2020-05-10得票数 0
回答已采纳
2回答
我有一个React应用程序，它当前使用的是react-router@4.2.0，当URL发生变化时，我正在努力渲染一个特定的组件。
当我尝试访问/locations/new时，它返回来自CityList组件的PropTypes错误。我已经尝试在LocationsWrapper内的路由组件中添加exact，然后再添加Main config，然而，这会影响其他路由-例如/locations变为空。
// BrowserRouter
import React from "react";
import { render } from "react-dom";
impor
浏览 15提问于2018-03-03得票数 0
回答已采纳
我们正在用dotnet编写一个带有Razor视图(纯后端堆栈)的项目。我们的计划是将每个视图移动到React，使用react-router-dom来处理客户机和服务器中的路由。
我们的想法是一页一页地移动，不要做大爆炸，因为这个项目已经在生产中了。
当我设置react-router-dom时，看起来每个页面都是在客户机上处理的，如果路由不在Router处理的路由中，则不会重新加载整个页面。
客户端路由器
import { Router } from 'react-router-dom'
import { createBrowserHistory, History } from
浏览 0提问于2019-08-07得票数 2
回答已采纳
1回答
我有一个使用流进行静态类型检查的React项目；我使用flow-typed安装了npm第三方库的libdefs。但是，有时无法识别这些类型。例如，下面是使用react-router-dom npm包的React组件，在使用来自相应flow-typed/npm/react-router-dom_v4.x.x.js的类型时会出现identifier ... Could not resolve name流错误。
但是，该类型在libdef中：
我正在与其他flow-typed类型一起这样做，而且它正在工作。我已经确认在package.json中安装了最新的库，并安装了最新的相关f
浏览 3提问于2017-07-03得票数 2
我试着解决这个错误已经有一段时间了，但是所有我做不到的事情似乎都起作用了，每次我都会遇到同样的错误：
< Route>元素仅用于路由器配置，不应呈现
这是index.js代码：
import React from 'react';
import ReactDOM from "react-dom";
import { BrowserRouter as Router } from "react-router-dom";
import App from './components/App'
import {Provi
浏览 1提问于2020-08-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
