Question

你好，我制作了一个与远程菜单组件互动的应用程序。我尝试了很多方法，并且更改了url，但未将组件渲染到屏幕上。这是代码https://github.com/DortasDimitrios/danai-delimeats，请帮助

Answer 1

您在菜单中启动一个新的BrowserRouter，它将为基础组件注入新的历史记录和位置。您必须访问已创建的历史对象并更改其位置。您可以使用<Route>元素执行此操作。示例：

<Route render={({history, location}) =>
    <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={[location.pathname]}
        onClick={this.clickAction(history)}
    >
        <Menu.Item key="/">
            <Icon type="home"/>
            <span>
                <FormattedMessage
                    id="main_layout.menu.home"
                    defaultMessage="Home"
                />
            </span>
        </Menu.Item>
        <Menu.Item key="/user">
            <Icon type="user"/>
            <span>
                <FormattedMessage
                    id="main_layout.menu.users"
                    defaultMessage="Users"
                />
            </span>
        </Menu.Item>
    </Menu>
}/>
[...]


private clickAction(history) {
    return (param) => {
        history.push(param.key);
    };
}

<Route>中的渲染回调获取位置和历史记录对象，您现在可以将新位置推送到该位置和历史记录对象。

创建了一个固定版本：https://github.com/SidiaDevelopment/danai-delimeats

Answer 2

尝试使用以下代码替换index.js和app.js。我希望的问题是

确保将主要的react渲染代码包装在路由器中。例如，使用react-dom，您需要将应用程序包装在Browser-Route中

// index.js

import {
  BrowserRouter
} from 'react-router-dom'
ReactDOM.render( < BrowserRouter > < App / > < /BrowserRouter>, document.getElementById('root'));


// app.js

<Switch>
        <Route path="/" exact render={props => <Homepage {...props} />} />
        <Route
          path="/about-us"
          exact
          render={props => <WhoWeAre {...props} />}
        />
</Switch>

React Browserrouter URL更改，但页面/组件仅在刷新时呈现

2 个答案: