react-router v5.1.0 无法读取未定义的属性“位置”，

Posted 2023-02-22

【中文标题】react-router v5.1.0 无法读取未定义的属性“位置”，

【英文标题】：react-router v5.1.0 Cannot read property 'location' of undefined ,

【发布时间】：2020-12-22 00:49:38

【问题描述】：

我正在尝试根据页面 URL 更改容器的背景颜色，因此如果用户导航到 URL '/movie' 它应该将背景更改为红色，否则它应该将背景设置为绿色

这是我的 index.js

import React from 'react';
import  BrowserRouter, Switch, Route, useLocation from 'react-router-dom';

import styled from 'styled-components';
import Movies from 'pages/Movies/Movies'
import Templates from 'pages/Movies/Templates'
;

export default () => 
    
    const location = useLocation();

    return (
        <>
            <BrowserRouter>
                <Container style=backgroundColor:location.pathname === '/movies' ? 'red' : 'green'>
                    <Main>
                        <App>
                            <Switch>
                                <Route path='/templates' component=Templates />
                                <Route path='/movies'  component=Movies />
                            
                            </Switch>
                        </App>
                    </Main>
                </Container>
            </BrowserRouter>
        </>
    );


const Container = styled.div`
    min-height: 100vh;
    
`;

不幸的是，我收到以下错误

  Uncaught TypeError: Cannot read property 'location' of undefined
    at useLocation (app.js:54283)
    at app.js:72792
    at renderWithHooks (app.js:37714)
    at mountIndeterminateComponent (app.js:40129)
    at beginWork$1 (app.js:41478)
    at htmlUnknownElement.callCallback (app.js:21756)
    at Object.invokeGuardedCallbackDev (app.js:21805)
    at invokeGuardedCallback (app.js:21860)
    at beginWork$$1 (app.js:47124)
    at performUnitOfWork (app.js:46032)

我需要做什么来解决这个问题？

【问题讨论】：

将const 更改为let。基于此处的文档-> reactrouter.com/web/api/Hooks

不，那也不行

你能发布完整的错误吗？

@sidthesloth 完成检查更新

【参考方案1】：

您需要将BrowserRouter 移出该组件。最好把它移到index.js并附上<App />

【讨论】：

你能通过我的 ocode 显示你的解决方案吗？我不明白吗？

从该文件中删除 <BrowserRouter> 和 </BrowserRouter> 并将其放在 <App/> 周围的 index.js 文件中

codesandbox.io/s/friendly-wozniak-xtocw?file=/src/App.js 这是代码

我正是在寻找这个。谢谢！

我已经这样做了。仍在测试时，这在 react-testing-library 中给出了相同的错误。

【参考方案2】：

您在路由器包装的组件之外使用useLocation，在您的情况下，根组件（app.js 内部）是路由器组件的包装器

请检查this，当您在App.tsx 和QueryReducer 组件中使用该挂钩时，您会看到区别。

【讨论】：

那么我需要改变什么？

你应该把路由器移到index.js这里ReactDOM.render(<App />, document.getElementById('root'))包裹<App/>