Question

我有两条路线。顶层是App.js，用于确定是否应显示登录页面或布局。第二级是Layout.js，它确定要在布局中显示的单个页面。

问题是，当我在App.js中添加顶级路由器时，指向Page1和Page2的链接仅在应用程序中单击时有效。当我尝试在浏览器网址栏中输入localhost / page1时，它什么也没有显示。刷新浏览器也不会呈现任何内容。仅刷新/路径有效。

如果我在App.js中不使用路由器，则行为正常，并遵循浏览器路径。

这可能是因为路由器的顶层拦截了URL请求。如何在Layout.js中嵌套的App.js中获得路由器，以便在浏览器URL中键入localhost / page1来工作？还是有另一种方式来实现单独的登录页面？

App.js（顶级）：

class App extends Component {
  render() {
    return (
      <div>

        <Router>
          <Switch>
            <Route exact path="/" component={withAuth(Layout)} />
            <Route path="/login" component={Login} />
          </Switch>
        </Router>

      </div>
    );
  }
}
export default App;

Layout.js（嵌套级别）：

class Layout extends React.Component {
  render() {
    return (
      <div>
          <Header /> 
          <Router>
            <div className="wrapper">
              <Sidebar /> {/* Displays the links */}
                <div id="content">
                  <Route exact path='/' component={withAuth(Overview)} />
                  <Route path='/Page1' component={withAuth(Page1)} />
                  <Route  path='/Page2' component={withAuth(Page2)} />
                </div>
            </div>
          </Router>
      </div>
    );
  }
}
export default Layout;

在浏览器中键入URL时，React-router不起作用

0 个答案: