Question

问题

此处<LandingPage>不能正确加载到<Main>组件中，许多路由也无法正常工作。我认为这与路由有关，因为它在localhost：3000上可以很好地工作，但是当我部署它时，路径更改为 https://codepirate4.github.io/Portfolio/ （Github用户名：codepirate4，存储库：Portfolio）。

我有以下代码。

App.js

render(){
  return (
    <div>
            <Layout>
               <Header className="header-color" title={<Link style={{textDecoration: 'none', color: 'white'}} to="/">MyPortfolio</Link>} scroll>
                <Navigation>
                    <Link to="/Resume">Resume</Link>
                    <Link to="/AboutMe"> AboutMe</Link>
                    <Link to="/Contact">Contact</Link>
                    <Link to="/Projects">Projects</Link>
                </Navigation>
               </Header>
                <Drawer title={<Link style={{textDecoration: 'none', color: 'black'}} to="/">MyPortfolio</Link>}>
                    <Navigation>
                        <Link to="/Resume">Resume</Link>
                        <Link to="/AboutMe"> AboutMe</Link>
                        <Link to="/Contact">Contact</Link>
                        <Link to="/Projects">Projects</Link>
                    </Navigation>
                </Drawer>
                <Content>
                  <Main/>               
                </Content>
            </Layout>
    </div>

  );

};

在和已正确加载，但未正确加载。

Main.js

const Main= () =>(
<Switch>
    <Route exact path= '/' component={LandingPage}></Route>
    <Route  path='/AboutMe' component={AboutMe}></Route>
    <Route  path='/Resume' component={Resume}></Route>
    <Route  path='/Projects' component={Projects}></Route>
    <Route  path='/Contact' component={Contact}></Route>
</Switch>

）

index.js

ReactDOM.render(
<React.StrictMode>
  <BrowserRouter>
   <App />
  </BrowserRouter>  
</React.StrictMode>,
document.getElementById('root')
);

此外，我已经为gh页正确执行了部署的基本步骤

package.json

"homepage": "https://Codepirate4.github.io/Portfolio",

如果有人需要有关代码或问题的更多信息，请告诉我

react路由器交换路由在github.io上的gh-pages不起作用-reactjs

0 个答案: