reactjs - React Router v5.0 嵌套路由

Question

我正在构建一个 react 应用程序，但无法使路由工作。

1. 我需要一个通用布局(页眉、页脚)来用于一些身份验证路由(/login、注册、忘记密码 等...)

2. 我需要为应用程序的其余 protected 部分(Home、Dashboard 等...)提供另一个通用布局

3. 我需要另一个没有任何布局的 404 页面。

我已经尝试了这些链接中的几种技术:

• Multiple Layouts with React Router v4
• https://simonsmith.io/reusing-layouts-in-react-router-4
• Nested routes with react router v4 / v5
• https://reacttraining.com/react-router/web/example/route-config

但可以达到工作版本。

这是我目前拥有的:

(注意:目前我忽略了阻止未登录用户进入 AppLayout 私有(private)路由的需要，我将在之后立即处理)

const App: React.FC = () => {
    const history = createBrowserHistory();

    return (
        <div className="App">
            <Router history={history}>
                <Switch>
                    <AppLayout>
                        <Route path="/home" component={HomePage}/>
                        <Route path="/dashboard" component={DashboardPage}/>
                        ...
                    </AppLayout>
                    <AuthLayout>
                        <Route path="/login" component={LoginPage}/>
                        <Route path="/sign-up" component={SignUpPage}/>
                        ...
                    </AuthLayout>
                    <Route path="*" component={NotFoundPage} />
                </Switch>
            </Router>
        </div>
    );
};

export default App;

AuthLayout 和 AppLayout 都很简单且类似(只是每个都有不同的页眉/页脚):

class AppLayout extends Component {
    render() {
        return (
            <div className="AppLayout">
                <header>...</header>
                {this.props.children}
                <footer>...</footer>
            </div>
        );
    }
}

export default AppLayout;

问题是仅渲染来自 AppLayout 的路由。其他路由仅显示 AppLayout header 和 footer，没有任何内容。

这些是我正在使用的 react 版本:

    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-router-dom": "^5.0.0",

如有任何帮助，我们将不胜感激。

提前致谢。

Answer 1

每个布局都应该有一个路径组件以区别于其他布局。

例如

身份验证布局可以驻留在 /auth 下例如，登录将 /auth/login ，注册将是 /auth/signup

应用程序布局可能位于 /app 下例如，仪表板将是 /app/dashboard ，家将是 /app/home

工作演示

App.js

import { Switch, BrowserRouter, Route, Redirect } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Layouts />
    </BrowserRouter>
  );
}

布局.js

const NotFound = () => <h1>Not Found</h1>;

function Layouts() {
  return (
    <Switch>
      <Route path="/auth" component={AuthLayout} />
      <Route path="/app" component={AppLayout} />
      <Route path="/" component={NotFound} />
    </Switch>
  );
}

AuthLayout

const Signup = () => <p>Login</p>;
const Login = () => <p>Sign up</p>;

function AuthLayout() {
  return (
    <div>
      <h1>Auth Layout</h1>
      <Route path="/auth/signup" exact component={Signup} />
      <Route path="/auth/login" exact component={Login} />
      <Redirect from="/auth" to="/auth/login" exact />
    </div>
  );
}

应用程序布局

const Home = () => <p>Home</p>;
const Dashboard = () => <p>Dashboard</p>;

function AppLayout() {
  return (
    <div>
      <h1>App Layout</h1>
      <Route path="/app/home" exact component={Home} />
      <Route path="/app/dashboard" exact component={Dashboard} />
      <Redirect from="/app" to="/app/home" exact />
    </div>
  );
}

<小时/>

此外，如果您想保护某些路由在未经身份验证的情况下不被渲染，那么您可以创建 PrivateRoute如果未通过身份验证，将重定向到身份验证布局的组件。

PrivateRoute.js

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props => sessionStorage.token // your auth mechanism goes here
      ? <Component {...props} />
      : <Redirect to={{ pathname: '/auth' }} />}
  />
);

您可以使用这个PrivateRoute组件而不是 react-router的Route组件。

例如:

<PrivateRoute path="/app" component={AppLayout} />