我正在使用React路由器，我希望我的一个带有path="/“的路由链接成为重新加载时的主页。你怎么能这样做呢？
要实现将带有path="/"的路由链接成为重新加载时的主页，可以通过以下步骤来完成：
- 首先，确保你已经安装了React Router库。可以使用以下命令进行安装：
npm install react-router-dom- 在你的应用程序的根组件中，导入React Router的相关组件：
import { BrowserRouter as Router, Route } from 'react-router-dom';- 在根组件中，创建一个路由器，并将所有的路由组件包裹在其中：
function App() {
return (
<Router>
{/* 在这里添加你的其他路由组件 */}
</Router>
);
}- 在路由组件中，使用
exact属性来确保只有当路径完全匹配时才会渲染该组件：
<Route exact path="/" component={Home} />- 创建一个名为
Home的组件，并在其中编写主页的内容：
function Home() {
return (
<div>
{/* 在这里添加主页的内容 */}
</div>
);
}- 最后，在你的应用程序中，确保将
App组件渲染到DOM中：
ReactDOM.render(<App />, document.getElementById('root'));通过以上步骤，你的带有path="/"的路由链接将成为重新加载时的主页。
关于React Router的更多信息和用法，你可以参考腾讯云的产品介绍链接：React Router产品介绍。
相关·内容
2回答
我在react中创建了四个不同的页面，并使用react路由器添加了它们？如果用户未登录，我希望将配置文件页面重定向到主页。我试过遵循密码。
<Route path="/profile" {login ? <Profile /> : <Navigate replace to="/" />} />
( "/“是主页)
浏览 5提问于2022-06-06得票数 1
2回答
在以前使用Reach路由器的项目中，我正在设置React路由器。
在此之前，路线看上去是这样的：
import { Router } from '@reach/router';
...
<Router>
{anon ? <AnonHomepage /> : <Homepage />}
<Explore path="explore/:category" />
</Router>
然后，切换到React路由器，我的文件设置如下：
import { BrowserRouter, S
浏览 1提问于2019-07-09得票数 2
回答已采纳
1回答
我正在学习一些反应，并有一个问题。路由。
我使用的是react-router 4。在我的索引文件中，我有一个带有3条路由的路由器，如下所示：
<Router>
<div>
{indexRoutes.map((p, k) => {
return <Route exact path={p.path} component={p.component} key={k} />;
})}
</div>
</Router>
这些页面是:主页，登录和一个受限的成员区域。mem
浏览 2提问于2018-04-25得票数 0
1回答
我有一个反应路由器3的设置，很好地工作在嵌套组件。现在，当我试图在react路由器V4中做同样的事情时，我似乎无法让它工作。我读过几篇文章，包括一些文档，但仍然无法让它起作用。我首先在react路由器3中发布我的设置，然后我尝试了什么-路由器4。
React路由器3安装App.js
import { Router, browserHistory } from 'react-router';
import Store from './store';
import routes from './routes';
ReactDOM.render(
浏览 3提问于2017-06-26得票数 1
回答已采纳
1回答
我正在尝试从路由器发布到的组件中更新路由器。这是带有导航栏的主页，以及指向各个页面的路由。 class Page extends React.Component {
render() {
return (
<Router>
<Navbar id="navbar" variant="dark">
<Navbar.Toggle />
<Navbar.Collapse className="justify-content-end"
浏览 9提问于2019-07-02得票数 0
3回答
每当我尝试浏览像"/about“这样的路径时，浏览器中的路径会是这样的："”。我有主页了。反应路由器并没有指引我到想要的路径。
我使用React路由器v4。
这是我的App.jsx文件：
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router-dom').BrowserRouter;
var {Route,Link, hashHistory, Switch} = require(
浏览 3提问于2017-07-14得票数 1
回答已采纳
6回答
我在学习反应。我有带有4个子页面的页面，我使用React路由器来浏览这些页面。除了重新加载页面之外，一切都很好。当我从页面" home“转到”约“或其他页面时，可以，但当我刷新页面时，它会再次呈现”约“页面，然后将页面更改为主页(home是默认/第一页)，.I希望它停留在当前呈现的页面上，而不是每次刷新后返回主页。在index.js文件中有我的代码，在这里我呈现整个应用程序并使用路由器：
<Provider store={store}>
<Router path="/" history={browserHistory}>
浏览 6提问于2017-07-06得票数 8
回答已采纳
`
import React from "react";
// import { BrowserRouter as Router, Route, Switch} from "react-router-dom"
import Home from "./Home";
import Header from "./Header";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
const App = () =>
浏览 3提问于2022-11-12得票数 1
回答已采纳
我与React路由器V5一起工作。
我已经使用url params实现了React分页。
当我更改url中的查询参数，然后路由器重定向到主页时，我将面临问题。
你能告诉我我的路线出了什么问题吗？
export const AppRoutes = () => {
const { currentUser } = useAuth();
return (
<Switch>
{!currentUser.isLoggedIn && <Route path={AppRoute.login} component={Login} />}
浏览 2提问于2022-05-12得票数 1
回答已采纳
2回答
我尝试使用React路由器中的Link在新选项卡中打开一个组件，它打开了一个404 not found而不是react组件。
React入口点js，
import React from 'react';
import { render } from 'react-dom';
import { Route,Router, browserHistory} from 'react-router';
import Home from './components/Home';
import About from './compone
浏览 0提问于2016-08-19得票数 0
1回答
我试图在react create-app中实现路由器，但它总是呈现"/“并显示主页或SignIn页面。我怎么才能解决这个问题？
function AppRouter({ isLoggedIn, user }) {
return(
<Router>
<Routes>
<Route path="/profile" element={<Profile />} />
<Route path="/signUp" element={<SignUp /&
浏览 3提问于2022-07-01得票数 1
回答已采纳
4回答
当我从/home导航到/dashboard时，路由器工作正常，但是当我从/home导航到/profile:id时，路由器导航到那个配置文件页，这个页面也很好，但是当我刷新它时，它变成了空白页，不给我任何404或者重定向回主页，我使用的是
react-router: "^4.2.0", react-router-dom: "^4.2.2", react-router-redux: "5.0.0-alpha.6",
那么，如何摆脱空白页，如果url在/profile/5，然后在刷新页面上导航回主页或任何应该合适的内容，请帮助？
index.js
浏览 3提问于2018-03-09得票数 4
我想我的react路由器出了点问题。如何防止react路由器重新呈现以前呈现的页面？
我有这样的路由器代码：
class App extends React.Component {
render() {
return (
<div>
<NavBar/>
{this.props.children}
</div>
);
}
}
ReactDOM.render(
(
<Router history={hashHistory}&
浏览 13提问于2017-02-14得票数 7
我正在尝试使用react路由器设置模式路由。要让它工作，在显示模式的路由后面的底层路由不能有‘精确’参数。
有没有一种方法可以保持如下所示的当前路由功能，而不在Home路由上使用'exact‘？( Home组件将创建模式路由)即。是否有其他方法在react路由器中实现此路由(使用更多交换机等)？因此，我可以省略主路由中的“精确”，而所有内容仍然可以正确路由？
<BrowserRouter>
<Switch>
<MainLayout>
<Route exact path='/' co
浏览 14提问于2021-05-17得票数 0
我已经安装了render路由器，并且我正在尝试将主页面呈现出来。
这是当前的index.js
import React, { Component, PropTypes } from 'react';
import { Router, Route } from 'react-router';
import Layout from './components/Layout';
import NewsComponent from './components/NewsComponent';
<Router>
<d
浏览 4提问于2017-04-20得票数 1
回答已采纳
我们正在用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
回答已采纳
我创建了一个带有react的网站，我使用的是react路由器-dom，我想将它部署到netlify，所以我运行npm运行构建，但是当我单击index.html时。它只显示了我为不存在的路径(即404页)创建的路由，如何显示主页和页面的其余部分？
浏览 7提问于2022-03-01得票数 2
回答已采纳
我正在实验在一个角度应用程序中的react。我目前正在使用加载反应组件在我的角度应用程序。
我正在使用作为我的应用程序的一部分。我创建了另一个部分，并希望使用反应路由器以及。不幸的是，我遇到了问题，唯一能工作并被识别的路由器是我访问的第一个路由器。这是我观察到的。
当我的应用程序加载主页时，两个路由器都会加载。我怎么知道？我向路由器对象添加了一个属性，并在路由器创建的文件中添加了console.logged属性。
如果我先访问路由器A，路由器A工作！当我使用路由器B访问页面时，路由器B似乎不被识别，也无法工作，我收到了错误“警告:react路由器位置”"/RouteB“与任何路
浏览 4提问于2017-10-12得票数 0
2回答
我在访问路由器嵌套路由时遇到问题，我正在尝试导航到/并呈现page2，但当路由更改为//时，我停留在同一页的"/“主页上 <Appjs>
import React from "react";
import "./App.css";
import Homepage from "./Components/Homepage";
import Details from "./Components/Details";
function App() {
return (
<div>
浏览 26提问于2020-06-19得票数 0
2回答
我如何设置Django urls.py和React组件来建立它？我的要求是让Django用urls文件呈现主页：
urlpatterns = [
path('', views.index),
]
然后，React路由器应该呈现后续的链接(例如。/home，/about)
浏览 0提问于2018-10-16得票数 2
回答已采纳
3回答
有一个登录组件。我的应用程序入口点是登录页面。成功登录后，移动到主页(仪表板和导航)。成功登录后，显示带有nav组件的主页，dashboard.But导航不起作用。我收到错误消息：
react-路由器位置"/examples“与任何路由都不匹配react-路由器位置"/dashboard”与任何路由都不匹配
我的登录组件是
var React = require('react');
var {Link} = require('react-router');
var Dashboard = require('Dashboard');
浏览 3提问于2016-10-04得票数 3
我有一个带有react-router 2.4的路由器，它看起来如下所示：
import ReactDOM from 'react-dom';
import React from 'react';
import { IndexRoute, Router, Route, browserHistory } from 'react-router';
import { Provider } from 'react-redux';
import * as Pages from 'pages';
import App from
浏览 1提问于2017-08-21得票数 0
回答已采纳
4回答
我的反应路线定义如下：
...
<Route component={Header} />
<Route exact path="/" component={Landing} />
<Route path="/about" component={About} />
<Route path="/contact" component={Contact} />
<Route component={Footer} />
...
我想要定义一个catch所有的路由捕捉任何不匹配的降落，约或联系路线，
浏览 0提问于2018-07-21得票数 18
回答已采纳
我正在使用路由器版本5.2，并尝试在文件app.js中创建路由。我的路由如下所示： import React from 'react';
import { render } from 'react-dom'; // if you use just render()
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
ReactDOM.render(
浏览 47提问于2020-07-29得票数 0
回答已采纳
我正在使用React开发一个动态网页。我使用来自React路由器的一个开关组件，根据用户的需要从主页切换到各种其他页面。我希望使用以下路由来创建一个新帐户： 主页>>登录页面>> create account (1) > (2) > (3) >> back to login or Home page In word:用户应该能够从主页导航到登录页面，从登录页面导航到具有三个步骤(每个都是唯一的组件)的Create account页面，并从第三步返回到主页。 我的麻烦在于从第三个创建帐户页面返回到主页或登录页面。我可以从页面1 > 2、2
浏览 12提问于2019-05-23得票数 0
回答已采纳
我试过以下几种方法，但效果不佳：
const routeConfig = [
{
// path: '/',
component: MyApp,
indexRoute: {component: Homepage},
childRoutes: routes
}
];
React.render(<Router history={history} routes={route
浏览 5提问于2015-11-13得票数 4
回答已采纳
我正在使用React和React Router尝试将我的组件链接到一个项目中。我想链接一个图片从主页(当前组件)到一个不同的组件。
目前我可以点击图片，它有点像一个链接(有时我点击它后会变成蓝色)，尽管它不会链接到其他组件，也不会显示错误，url栏中也没有任何变化。从字面上看什么都没有发生。
有什么想法吗？下面是我的代码：
import { HashRouter as Router, Route,} from 'react-router-dom';
import Header from './Header'
import PortfolioWorkPage
浏览 11提问于2020-02-22得票数 1
回答已采纳
3回答
我正在迁移一个react应用程序，并试图将它拆分。基本上，我想将一些客户端反应路线重定向到绝对url(或相对的，但至少与服务器往返，在那里进行反向代理)。
请注意，
react路由器3.0.0
react路由器-redux 4.0.7
这个应用程序有以下网址：
=>主页
=>：第一条路线
=>第二条路线
第三条路线 =>
一切都在里面，立刻做出反应。
路由如下所示：
<Provider store={store}>
<Router history={history}>
<Rou
浏览 8提问于2017-12-20得票数 7
回答已采纳
3回答
我在我的应用程序中添加了铁路由器，以处理主页、关于页和应用程序的主页(地图)之间的路由问题。
在添加了带有陨石的铁路由器之后，我编写了一个router.js文件并将它放在我的/client文件夹中，但是我得到了一个错误，上面写着“未定义的ReferenceError:路由器”。
我用chrome检查了错误，它指向“Router.configure(.”)在router.js的开头，我在下面添加了它
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading'
});
Router
浏览 4提问于2014-01-22得票数 7
回答已采纳
React路由器v6.4引入了一种新的带有和的路由API。
在较早版本的Reactive路由器中，可以对使用Reactive路由器定义的路由进行包装，以启用页面转换。当提供位置和键的值时，Framer可以检测是否从组件树中添加或删除一个子元素，以显示开始和退出过渡动画。
反应前的路由器v6.4:
<AnimatePresence exitBeforeEnter>
<Routes location={location} key={location.pathname}>
<Route path="/" element={<HomePa
浏览 5提问于2022-10-25得票数 2
回答已采纳
1回答
在应用程序中，除了主页面( '/' )之外，导航在所有页面中都是单一的。
如何防止导航两次出现在家里。这是一个屏幕截图和反应路由器的代码。
React中双菜单的屏幕截图-路由器：
以下是代码：
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigator />
<Switch>
<Route pat
浏览 0提问于2018-11-18得票数 0
回答已采纳
4回答
我以前的网站只显示主页时，主页选项卡被点击，然后如果你点击我的肚脐品牌，它说404。这个网站用npm开发了一个创建反应应用程序，但是它在这里不起作用，在构建上也不起作用。我不知道这个应用程序出了什么问题，也许路由器的设置搞砸了，我不知道。我已经链接了应用程序和索引页面，我有路由器设置。如果你需要更多的信息，就问我更多的信息。
谢谢
索引
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-route
浏览 22提问于2022-04-23得票数 8
回答已采纳
1回答
编辑:我发现，当直接这样做时，浏览器试图找到名为“价格”的文件，我如何使浏览器不这样做，并寻找index.html呢？我正在运行webpack-dev服务器。
Edit2:我现在有点理解了，我想链接本地主机:8080/价格直接到index.html，然后通过路由器运行到定价组件，我怎么能做到呢？
我已经在一个网站上建立了一个React路由器，但是当我直接访问一个特定的页面(例如:localhost:8080/ page )时，它给了我以下错误：
Content Security Policy: The page’s settings blocked the loading of a resou
浏览 3提问于2017-12-28得票数 1
回答已采纳
我使用了React路由器，如下所示：
<BrowserRouter>
<Switch>
<Route exact path="/" component={Login} />
<Route exact path="/home" component={HomeComponent}/>
</Switch>
</BrowserRouter>
当我使用this.props.history.push("/home")或页面是移动到主页，但网址仍然是。路由是有效的，我可以导航到所
浏览 4提问于2021-06-30得票数 0
回答已采纳
1回答
我在玩角2，我在路由器上遇到了一些麻烦。我想在主路由器出口内有第二个路由器插座。
在第一个路由器出口内，我重定向到主页，其中有第二个路由器出口：
<router-outlet name="main"></router-outlet>
这是我的app.routing，没有进口。
const appRoutes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'login', component: LoginComponent},
浏览 4提问于2016-10-06得票数 9
回答已采纳
我不断地收到这个错误，当使用带有类型记录和webpack的react路由器时。
JSX元素类型“路由器”没有任何构造或调用签名。
这就是我的路由器的配置方式。
import * as React from 'react';
import * as Router from 'react-router';
import { Route, IndexRoute, hashHistory } from 'react-router';
const Temp = () => {
return (
<div>
浏览 2提问于2016-10-28得票数 0
回答已采纳
我喜欢使用react路由器根据位置有条件地渲染。例如，我有一个只有在主页上呈现的组件，如下所示：
<Route
exact={ true }
path="/"
render={ HomeHeroSection }
/>
但是，由于设计需求，我也有一个组件，如果不是在主页/基本路径上，就应该呈现该组件。如果我将某个未使用的参数命名为通配符，我只能想出一种从路径到regexp的模式。
<Route
path="/:foo+"
render={ NavLinks }
/>
我应该使用的path道具有更好的
浏览 0提问于2018-08-21得票数 1
回答已采纳
我有一个带有网格的页面，用于显示产品。在我转到产品详细信息页面后，顶部栏上的图标不再加载。为什么会发生这种情况？
这是我的布局组件：
export default class Layout extends React.Component {
render(){
return <div>
<LoadingScreen/>
<AppBar/>
<MyRouter/>
<Footer/>
</
浏览 4提问于2019-11-12得票数 0
回答已采纳
我有一个小的react项目和react-router-dom库。这是我的带有浏览器路由器的片段
<BrowserRouter history={history}>
<Main />
</BrowserRouter >
这是我的主要组件的片段
<Switch>
{!user ? (
<>
<Route
path="/login"
exact
component={() => (
<
浏览 7提问于2021-02-19得票数 0
我想为回去做一个按钮，我做了以下工作：
const GoBackBtn = ()=>{
const navigate = useNavigate()
return (<button onClick={()=>navigate(-1)}> {'<='} </button>)
}
但是，这很好，问题是当我第一次访问这个组件所在的网页时，我在根目录中：
问题是当你点击按钮，它把你带出网站的空白页(浏览器主页，如果你使用的铬，首页)。
如果路由器的历史记录中没有项目，我想通过隐藏按钮来防止这一点。
但我怎么能察觉到呢？
React
浏览 5提问于2022-08-30得票数 1
我有包含子路由器的主页。在那个路由器中，我有主页面的默认路由器(目标组件)。但是当我添加404页时，我的子路由器一直设置为404页。
如何正确设置子默认路由器和404页？
我的路由器
{
path: '/',
name: 'MainPage',
component: MainPage,
meta: {
title: (route: any) => 'Goal list'
},
children: [
{
浏览 3提问于2019-04-03得票数 0
回答已采纳
1回答
好的，我有我的React路由器或多或少地以我想要的方式工作，但我的问题是:我现在需要在我的JS中添加一些功能。
例如:用户输入他们的详细信息并单击‘登录’，我希望我的jQuery检查凭证是否正确，以及是否更改到主页的路径。
我不知道我会怎么做。
这是我的反应-路由器代码：
import React from 'react'
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory, Navigation } from 'react-router'
import L
浏览 2提问于2016-11-18得票数 0
回答已采纳
2回答
未找到的组件总是呈现
、、、、
这是循环遍历路由文件的代码。在这里，我创建了路由器配置数组，从这里导出到app.js。
导入React，从“react”导入{ Component }；从“react路由器-dom”导入{ routes }；从“./routes”导入路由；类RouterConfig扩展组件{ render() { return (routes.map(路由) => { return (<路由key={ route.id } path={ route.path } exact={ route.exact } component={ route.component } /> )；} )；}导出
浏览 3提问于2017-10-05得票数 4
回答已采纳
在React路由器Dom v5上，我有一个可以使用嵌套元素的工作代码。V5代码是：
const App = () => {
return (
<Router>
<Switch>
<Route exact path="/" />
{user && (
<>
<Route path="/movies">
<Home type="movie"
浏览 5提问于2022-05-26得票数 2
回答已采纳
1回答
在React中登录后对页面的限制
、、、、
因此，我在我的react应用程序中使用React路由器v6。 我在app.js文件中启用了以下路由 <Routes>
<Route path='/' component={<Home />} />
<Route path='/login' component={<SignUp />} />
<Route path='/signup' component={<Login />} />
</Routes> 一切都很好。我想要做的是对页面
浏览 17提问于2021-07-15得票数 0
回答已采纳
1回答
我正在开发一个应用程序，它正在使用React路由器，我注意到当我的Redux存储发生变化时，路由器正在重新呈现当前路由所引用的组件，而不是重新呈现路由本身。
为了说明这个问题，我实现了一个PrivateRoute，它检查用户当前是否登录。在最基本的形式中，它看起来如下所示：
const PrivateRoute = ({component: Component, ...rest}) => {
return <Route {...rest} render={(props) => {
const state = store.getState()
if (st
浏览 3提问于2017-12-10得票数 1
回答已采纳
我正在尝试将react路由器实现到我的应用程序中，但我遇到了一个问题，我有一些“链接”显示“模式”对话框，但react路由器将它们视为路由并将我返回到我的“主页”页面
<a href="#" onClick={() => this.props.Show(true) }><i className="fa fa-plus" aria-hidden="true">
路由器
ReactDOM.render(
<Provider store={store}>
<Router histo
浏览 12提问于2016-08-19得票数 2
1回答
页面之间的导航
、、
相对来说，我是ReactJs的新手。考虑一下，我们有以下代码：
index.js
import {BrowserRouter as Router, Route} from 'react-router-dom'
import MyComponent1 from 'path/to/component1'
import MyComponent2 from 'path/to/component2'
import App from './App'
****
const WrappedApp = (
<Router>
浏览 3提问于2018-01-05得票数 2
回答已采纳
1回答
Reactjs屏幕没有呈现
、、、、
我认为问题是在交换机，在反应-路由器的版本或在路由.只有当我在这个类中创建和应用代码时，启动的屏幕才不会呈现并保持白色。我已经更改了react路由器-dom的版本，但是我不知道是什么。在routes.js:的代码下面。
//react-router-dom version: "^5.3.0"
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Home from './pages/Home';
import Header from './compone
浏览 2提问于2022-02-20得票数 0
我试图用几种方法解决这个问题，但没有成功。这个路由器非常适合于呈现，但是当我用元素替换时，App.jsx会抛出一个错误。
如果我删除一个() =>在带有主页的路由中，那么组件就会呈现出来，但是我不能在带有签名/注册的路由中这样做。
我不知道错误可能在哪里。
import React, { useState, useEffect } from "react";
import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import Homepage from "
浏览 5提问于2022-07-03得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
