Маршрутизация не читает идентификатор - PullRequest
Новая
       9

Маршрутизация не читает идентификатор

1 голос
/ 07 января 2020

У меня есть этот класс: 

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={} />

и после щелчка компонент был загружен правильно и отображать реквизиты, но после refre sh веб-сайт отображает ошибку 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

@ Редактировать импорт компонента пользователя Реагировать из 'реакции'; 

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

export default User;

Есть идеи, как решить мою проблему?

1 Ответ

0 голосов
/ 07 января 2020

Эта ошибка вызвана тем, что реквизит match не определен в компоненте <User/>, когда сопоставляется маршрут "/pl/panel/user/:id", что, в свою очередь, означает, что при обращении к params.id возникает исключение.

Есть несколько решений, чтобы решить эту проблему - простое решение - указать User компонент в его <Route/> через component prop: 

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

By указав таким образом компонент User, реагирующий маршрутизатор автоматически вставит реквизит match в 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 HO C имеет тот же эффект, что и первый подход, в результате чего match реквизит вводится в целевой компонент (ie User) при визуализации компонента UserWithRouter.

Обновление

Ошибка 404, возникающая при обновлении браузера, вероятна из-за несовместимой клиентской и серверной маршрутизации ,

Например, при переходе к маршруту /pl/panel/user/1 на клиенте и последующем обновлении страницы на ваш сервер будет отправлен запрос ресурса /pl/panel/user/1. Поскольку сервер не знает, как с этим справиться, обычно возвращается 404.

Простым решением было бы заменить <BrowserRouter> на <HashRouter> в коде на стороне клиента. Это префикс вашего пути к URL-адресу #, однако это позволит вам выполнить перезагрузку без каких-либо изменений в вашем бэкэнде.

Надеюсь, это поможет!

...