Questions tagged «react-router»

const rootEl = document.getElementById('root'); ReactDOM.render( <BrowserRouter> <Switch> <Route exact path="/"> <MasterPage /> </Route> <Route exact path="/details/:id" > <DetailsPage /> </Route> </Switch> </BrowserRouter>, rootEl ); 我正在尝试访问DetailsPage组件中的ID，但无法访问它。我试过了 <DetailsPage foo={this.props}/> 将参数传递给DetailsPage，但徒劳。 export default class DetailsPage extends Component { constructor(props) { super(props); } render() { return ( <div className="page"> <Header /> <div id="mainContentContainer" > …

75 reactjs  react-router 

我开始使用react-router v4。<Router>我的app.js中有一个简单的导航链接（请参见下面的代码）。如果我导航到localhost/vocabulary，路由器会将我重定向到正确的页面。但是，当我在之后按重新加载（F5）（localhost/vocabulary）时，所有内容消失并且浏览器报告Cannot GET /vocabulary。那怎么可能？有人可以给我任何解决方法的提示（正确重新加载页面）吗？ App.js： import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import { Switch, Redirect } from 'react-router' import Login from './pages/Login' import Vocabulary from './pages/Vocabulary' const appContainer = document.getElementById('app') ReactDOM.render( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/vocabulary">Vocabulary</Link></li> …

74 javascript  reactjs  routes  localhost  react-router 

我正在使用react-redux和标准react-routing。确定动作后，我需要重定向。 例如：我已经注册了几个步骤。并采取以下措施： function registerStep1Success(object) { return { type: REGISTER_STEP1_SUCCESS, status: object.status }; } 我希望他重定向到带有registrationStep2的页面。怎么做？ ps在历史记录浏览器中从未使用过“ / registrationStep2”。仅在成功注册结果步骤1页面之后，才会显示此页面。

72 reactjs  react-router  redux  redux-framework 

我不断收到错误： “路由器”可能只有一个子元素 使用react-router时。 我似乎无法弄清楚为什么它不起作用，因为它与示例中显示的代码完全一样：快速入门 这是我的代码： import React from 'react'; import Editorstore from './Editorstore'; import App from './components/editor/App'; import BaseLayer from './components/baselayer'; import {BrowserRouter as Router, Route} from 'react-router-dom'; import {render} from 'react-dom'; const root = document.createElement('div'); root.id = 'app'; document.body.appendChild(root); const store = new Editorstore(); const stylelist = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css', …

71 javascript  reactjs  react-router 

我正在使用几个星期前发布的React Router的新useHistory挂钩。我的React-router版本是5.1.2。我的React版本为16.10.1。您可以在底部找到我的代码。 但是，当我从react-router导入新的useHistory时，出现此错误： Uncaught TypeError: Cannot read property 'history' of undefined 这是由React-router中的这一行引起的 function useHistory() { if (process.env.NODE_ENV !== "production") { !(typeof useContext === "function") ? process.env.NODE_ENV !== "production" ? invariant(false, "You must use React >= 16.8 in order to use useHistory()") : invariant(false) : void 0; } return useContext(context).history; <---------------- …

18 reactjs  react-router  react-hooks  react-router-dom  react-context 

我在带有打字稿的React Router v5.1.2中使用UseHistory挂钩吗？运行单元测试时，我遇到了问题。 TypeError：无法读取未定义的属性“ history”。 import { mount } from 'enzyme'; import React from 'react'; import {Action} from 'history'; import * as router from 'react-router'; import { QuestionContainer } from './QuestionsContainer'; describe('My questions container', () => { beforeEach(() => { const historyHistory= { replace: jest.fn(), length: 0, location: { pathname: …

17 reactjs  typescript  react-router  jestjs  enzyme 

我是Next.js的新手，并且想知道如何从起始页（/）重定向到/ hello-nextjs。用户加载页面后，确定路径是否=== /重定向至/ hello-nextjs 在react-router中，我们执行以下操作： <Switch> <Route path="/hello-nextjs" exact component={HelloNextjs} /> <Redirect to="/hello-nextjs" /> // or <Route path="/" exact render={() => <Redirect to="/hello-nextjs" />} /> </Switch>

15 html  reactjs  routing  react-router  next.js 

我正在尝试基于应获取URL参数（id）的react-router-dom路由加载详细信息视图，并使用该参数进一步填充组件。 我的路线看起来很像，/task/:id并且我的组件加载正常，直到我尝试像这样从URL抓取：id为止： import React from "react"; import { useParams } from "react-router-dom"; class TaskDetail extends React.Component { componentDidMount() { let { id } = useParams(); this.fetchData(id); } fetchData = id => { // ... }; render() { return <div>Yo</div>; } } export default TaskDetail; 这会触发以下错误，我不确定在哪里正确实现useParams（）。 Error: Invalid hook call. Hooks …

14 reactjs  react-router 

我正在构建一个React单页应用程序，并且我注意到滚动恢复似乎无法在Chrome（可能还有其他浏览器）中按预期工作。 在react-router-dom github repo上，他们有一个页面说浏览器开始本地处理单页面应用程序的滚动，并且如果history.scrollRestoration设置为，则行为将类似于传统的非SPA网页。auto。 该页面上显示了我需要的行为： 向上滚动导航，这样就不会启动滚动到底部的新屏幕。 恢复窗口的滚动位置和“后退”和“前进”单击上的溢出元素（但不单击“链接”单击！） 但是我还需要禁用包含选项卡或轮播的路由的行为。 这是Chrome关于此问题的规范的链接。 我在适用于OS X的Chrome版本78.0.3904.97（正式版本）（64位）中观察到的内容似乎是我期望的history.scrollRestoration manual设置。也就是说，当我向下滚动页面一半并单击链接时，下一页向下滚动到页面中间，与上一页相同。 我history.scrollRestoration在各个地方检查了，发现它开始并保持auto为默认状态， 这里的一个重要意义来自@TrevorRobinson的回答：“浏览器自动进行滚动还原的尝试... ...大多数不适用于单页面应用程序...”好的...我发现对的一致支持history.scrollRestoration，但是显然，浏览器在实际进行滚动还原时很cr脚。那应该在这里指出，这今天可以节省我的时间。 然后，我寻找手动执行此操作的方法，但不清楚前进的方向。react-router-scroll说它与React Router v4不兼容，但是没有提到v5，这是当前的问题。那么我应该假设v5也不兼容吗？ 因此，我进一步寻找前进的方向，并找到了有关如何使用React Router v4处理滚动还原的 SO答案...我是否应该认为这将适用于React Router v5？更新：在v5中似乎不适用于我。我尝试了几种配置。我也无法使其完全与React Router v4一起使用。我知道它至少还活着，因为它滚动到新页面的顶部，但是历史记录未恢复。 我也确实可以使用react-router-scroll-memory，但是它没有用于禁用在指定路线上滚动的选项，例如选项卡或轮播所需的选项……我可能会对其进行破解。 我考虑过使用oaf-react-router，但是在文档中没有对禁用某些路由的滚动恢复或从上到下滚动进行任何说明。编辑：它确实处理了此问题，如我的回答所述。 有什么我忽略的东西吗？解决此问题的标准是什么，因为我不是唯一需要此功能的人。似乎我在做一些前卫和实验性的工作，但我只需要让自己的网站像普通网站一样滚动即可。

11 javascript  reactjs  google-chrome  react-router