路由不读取id

Question

我有这个 class:

export default class Panel extends PureComponent {
    constructor(props){
        super(props);
        this.state = {
            loading: true,
            url: '/' +this.props.lang+ '/panel',
            about: '/' +this.props.lang+ '/panel' + '/about',
            user: '/' +this.props.lang+ '/panel' + '/user/1',
            userPath: '/' +this.props.lang+ '/panel' + '/user/:id'
        }


    }
    componentDidMount(){
        this.setState({
            loading: false
        });
        console.log(this.state.user);
    }

    onResize(width){
        var totalWidth  = width + 250 + "px";
        var contentWidth  = width + "px";
        document.querySelector('.panel__slideContainer').style.width = totalWidth;
        document.querySelector('.mainContainer').style.width = contentWidth;

    }
    render() {
        if(this.state.loading === true){
            return <p>Loading...</p>
        }
        return (

            <div className="container panel__container">
            <Router>

                <ReactResizeDetector handleWidth onResize={this.onResize} />
                <div className="panel__slideContainer">

                <nav className="panel__sideMenu">

                    <ul>
                        <li>
                             <NavLink exact activeClassName="active" to={this.state.url}>Home</NavLink>
                        </li>
                        <li>
                            <NavLink activeClassName="active" to={this.state.about}><Trans>change password</Trans></NavLink>

                        </li>
                        <li>
                            <NavLink  activeClassName="active" to="/pl/panel/user/1">User</NavLink>
                        </li>
                    </ul>
                </nav>
                <div className="mainContainer">
                    <Nav />
                <div>
                    <Switch>
                        <Route exact path={this.state.url}>
                            <Home />
                        </Route>
                        <Route path={this.state.about} >
                            <About />
                        </Route>
                        <Route path="/pl/panel/user/:id">
                            <User />
                        </Route>
                    </Switch>
                </div>
        </div>
            </div>
            </Router>
            </div>
          );
    }
}

我的用户组件有问题，它没有读取道具。在我像这样尝试没有 <Switch> 的显示路由之前：

<Route path="" component={} />

单击组件正确加载并显示道具后，但刷新网站后显示错误 404。实施 Switch 后，它完全坏了。没有显示（只有控制台日志错误）

// This is the error:
> Cannot read property 'params' of undefined
> backend.js:6 The above error occurred in the <User> component:
> Uncaught TypeError: Cannot read property 'params' of undefined

@编辑用户组件从 'react';

导入 React

const User = (props) => {
  return (
    <div>
<p>User id: {props.match.params.id}</p>
    </div>
  );
}

export default User;

知道如何解决我的问题吗？

Answer 1

这个错误是由于 match 属性在 <User/> 组件中未定义，当匹配 "/pl/panel/user/:id" 路由时，这反过来意味着当 [=15] 时抛出异常=] 被访问。

有一些解决方案可以解决此问题 - 一个简单的解决方法是通过 component 属性在特定的 <Route/> 处指定 User 组件：

<Route path="/pl/panel/user/:id" component={User} />

通过这种方式指定 User 组件，react-router 会在路由匹配和渲染组件时自动将 match prop 注入 User。

另一种选择是使用 withRouter:

import { withRouter } from "react-router-dom";

/* Your current User component left as is */
const User = (props) => { ... }

/* Router injected into User */
const UserWithRouter = withRouter(User);

<Route path="/pl/panel/user/:id">
    {/* Use UserWithRouter instead, match will now be defined in User */}
    <UserWithRouter />
</Route>

withRouter HOC 与第一种方法效果相同，导致 match prop 在 UserWithRouter 组件被渲染。

更新

您在刷新浏览器时看到的 404 错误可能是由于客户端和服务器端路由不一致造成的。

例如，在客户端导航到路由 /pl/panel/user/1 然后刷新页面将向您的服务器发出请求以获取位于 /pl/panel/user/1 的资源。因为服务器不知道如何处理，所以通常会返回 404。

一个简单的解决方法是在您的客户端代码中将 <BrowserRouter> 替换为 <HashRouter>。这将在您的 url 路径前添加一个 #，但是它将允许您需要的重新加载行为，而不需要对您的后端进行任何更改。

希望对您有所帮助！

路由不读取id

Routing doesn't read id

javascript

reactjs

react-routing

更新