你可以试试 Routes.js

import React, { Component } from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import FrontPage from './FrontPage';
import Dashboard from './Dashboard';
import AboutPage from './AboutPage';
import Backend from './Backend';
import Homepage from './Homepage';
import UserPage from './UserPage';
class Routes extends Component {
    render() {
        return (
            <div>
                <Route exact path="/" component={FrontPage} />
                <Route exact path="/home" component={Homepage} />
                <Route exact path="/about" component={AboutPage} />
                <Route exact path="/admin" component={Backend} />
                <Route exact path="/admin/home" component={Dashboard} />
                <Route exact path="/users" component={UserPage} />    
            </div>
        )
    }
}

export default Routes

App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route } from 'react-router-dom'
import Routes from './Routes';

class App extends Component {
  render() {
    return (
      <div className="App">
      <Router>
        <Routes/>
      </Router>
      </div>
    );
  }
}

export default App;

我认为你在这里也可以达到同样的效果。

我成功地使用Switch来定义嵌套路由，并在根路由之前定义嵌套路由。

<BrowserRouter>
  <Switch>
    <Route path="/staffs/:id/edit" component={StaffEdit} />
    <Route path="/staffs/:id" component={StaffShow} />
    <Route path="/staffs" component={StaffIndex} />
  </Switch>
</BrowserRouter>

参考:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md

我更喜欢使用react函数。这个解决方案很简短，可读性更强

const MainAppRoutes = () => (
    <Switch>
        <Route exact path='/' component={HomePage} />
        {AdminRoute()}                  
        {SampleRoute("/sample_admin")}  
    </Switch>
);

/*first implementation: without params*/
const AdminRoute = () => ([
    <Route path='/admin/home' component={AdminHome} />,
    <Route path='/admin/about' component={AdminAbout} />
]);

/*second implementation: with params*/
const SampleRoute = (main) => ([
    <Route path={`${main}`} component={MainPage} />,
    <Route path={`${main}/:id`} component={MainPage} />
]); 

interface IDefaultLayoutProps {
    children: React.ReactNode
}

const DefaultLayout: React.SFC<IDefaultLayoutProps> = ({children}) => {
    return (
        <div className="DefaultLayout">
            {children}
        </div>
    );
}


const LayoutRoute: React.SFC<IDefaultLayoutRouteProps & RouteProps> = ({component: Component, layout: Layout, ...rest}) => {
const handleRender = (matchProps: RouteComponentProps<{}, StaticContext>) => (
        <Layout>
            <Component {...matchProps} />
        </Layout>
    );

    return (
        <Route {...rest} render={handleRender}/>
    );
}

const ScreenRouter = () => (
    <BrowserRouter>
        <div>
            <Link to="/">Home</Link>
            <Link to="/counter">Counter</Link>
            <Switch>
                <LayoutRoute path="/" exact={true} layout={DefaultLayout} component={HomeScreen} />
                <LayoutRoute path="/counter" layout={DashboardLayout} component={CounterScreen} />
            </Switch>
        </div>
    </BrowserRouter>
);

React Router v5的完整答案。

const Router = () => {
  return (
    <Switch>
      <Route path={"/"} component={LandingPage} exact />
      <Route path={"/games"} component={Games} />
      <Route path={"/game-details/:id"} component={GameDetails} />
      <Route
        path={"/dashboard"}
        render={({ match: { path } }) => (
          <Dashboard>
            <Switch>
              <Route
                exact
                path={path + "/"}
                component={DashboardDefaultContent}
              />
              <Route path={`${path}/inbox`} component={Inbox} />
              <Route
                path={`${path}/settings-and-privacy`}
                component={SettingsAndPrivacy}
              />
              <Redirect exact from={path + "/*"} to={path} />
            </Switch>
          </Dashboard>
        )}
      />
      <Route path="/not-found" component={NotFound} />
      <Redirect exact from={"*"} to={"/not-found"} />
    </Switch>
  );
};

export default Router;

const Dashboard = ({ children }) => {
  return (
    <Grid
      container
      direction="row"
      justify="flex-start"
      alignItems="flex-start"
    >
      <DashboardSidebarNavigation />
      {children}
    </Grid>
  );
};

export default Dashboard;

Github回购在这里。https://github.com/webmasterdevlin/react-router-5-demo

像这样的东西。

import React from 'react'; import { BrowserRouter as Router, Route, NavLink, Switch, Link } from 'react-router-dom'; import '../assets/styles/App.css'; const Home = () => <NormalNavLinks> <h1>HOME</h1> </NormalNavLinks>; const About = () => <NormalNavLinks> <h1>About</h1> </NormalNavLinks>; const Help = () => <NormalNavLinks> <h1>Help</h1> </NormalNavLinks>; const AdminHome = () => <AdminNavLinks> <h1>root</h1> </AdminNavLinks>; const AdminAbout = () => <AdminNavLinks> <h1>Admin about</h1> </AdminNavLinks>; const AdminHelp = () => <AdminNavLinks> <h1>Admin Help</h1> </AdminNavLinks>; const AdminNavLinks = (props) => ( <div> <h2>Admin Menu</h2> <NavLink exact to="/admin">Admin Home</NavLink> <NavLink to="/admin/help">Admin Help</NavLink> <NavLink to="/admin/about">Admin About</NavLink> <Link to="/">Home</Link> {props.children} </div> ); const NormalNavLinks = (props) => ( <div> <h2>Normal Menu</h2> <NavLink exact to="/">Home</NavLink> <NavLink to="/help">Help</NavLink> <NavLink to="/about">About</NavLink> <Link to="/admin">Admin</Link> {props.children} </div> ); const App = () => ( <Router> <div> <Switch> <Route exact path="/" component={Home}/> <Route path="/help" component={Help}/> <Route path="/about" component={About}/> <Route exact path="/admin" component={AdminHome}/> <Route path="/admin/help" component={AdminHelp}/> <Route path="/admin/about" component={AdminAbout}/> </Switch> </div> </Router> ); export default App;