Question

我们将React SPA嵌入到不是root用户的网站中。我在设置路由时遇到问题，以便它可以保留页面首次启动的路径。例如，应用程序加载到mysite.com/c/{customerId}。一旦我在应用程序中并导航到设置页面，我希望URL为mysite.com/c/{customerId}/settings。

问题： 为什么在单击我的链接时会获得完全呈现的空页？

以下是我目前的配置，我们使用的是Typescript，Webpack，React和React-Router v4。

条目文件（index.tsx）

ReactDOM.render(
<BrowserRouter>
    <Switch>
        <Route exact path='/c/:userId' component={App}/>
    </Switch>
</BrowserRouter>
, document.getElementById("root"));

App.tsx

render() {
        return ( 
            <div>
                <Menu/>
                <Sidebar/>
                <ContentPage/>
            </div>
    );
}

contentPage.tsx

render() {   
    return (
           <main className={styles.mainContent}>
               <Switch>
                    <Route path='/c/:userId/settings' component={SettingsPage} />
                    <Route path='/c/:userId/products' component={ProductPage}/>
               </Switch>
           </main>
    );
}

settingsPage.tsx

export const SettingsPage = () => {
    return ( 
            <Switch>
                <Route path='/c/:userId/settings' component={SettingsMain}/>
                <Route path='/c/:userId/settings/:gameId' component={GameEdit}/>
                <Route path='/c/:userId/settings/:gameId/levels' component={LevelsEdit}/>
            </Switch>
);

sidebar.tsx（链接的位置）

<Link to={`/c/${this.state.userId}/settings`} className={styles.sidebarItem}>
                            <i className={styles.sidebarIcon + " fa fa-cloud-upload"}></i><br/>
                            Settings
                    </Link>

设置主要

export class SettingsMain extends React.Component<Props, State> {

public render() {
   return (
        <div>
           <h4>This is a Settings page</h4>
       </div>
);

}

Answer 1

解决方案是使用BrowserRouter中的basename道具。一旦我设置了它并从我的路由中删除了基本URL，事情就开始起作用了。

React Router v4为React.js SPA中的子组件呈现空白页面

1 个答案: