Question

我是反应/减少我正在尝试让路线正常工作。这是一场灾难。我几乎遇到了你可以找到的每个bug /问题，但没有正确的解决方案。

我的index.js看起来像这样：

const store = createStore(
   rootReducer,
   applyMiddleware(thunk, promise)
);

const history = syncHistoryWithStore(createBrowserHistory(), store)

ReactDOM.render(
    <Provider store={store}>
        <MuiThemeProvider>
            <Router history={history}>
                <Switch>
                    <Route exact path="/" component={LoginPage}/>
                    <Route component={UserLayout}>
                        <Route exact path="/user/dashboard" component={UserDashboardPage} />
                        <Route exact path="/user/users" component={UserUsersPage} />
                    </Route>
                </Switch>
            </Router>
        </MuiThemeProvider>
    </Provider>,
    document.getElementById('root')
);

我首先有一个Switch现在在哪里，但是没有用。没有开关我得到一个错误，说路由器可能只有一个孩子。

我想要一个使用SimpleLayout的登录页面，我想要2个url的用户仪表板以及使用SimpleLayout和子布局UserLayout的用户用户。

我怎样才能完成这项工作？顺便说一句，我是否可以访问/ user / dashboard或/＃/ user / dashboard

这样的网址

Answer 1

我现在有了这个：

 <Provider store={store}>
    <MuiThemeProvider>
        <BrowserRouter history={history}>
            <SimpleLayout>
                <Route exact path="/login" component={LoginPage}/>
                <Route path="/user">
                    <UserLayout>
                        <Route exact path="/user/dashboard" component={UserDashboardPage} />
                    </UserLayout>
                </Route>
            </SimpleLayout>
        </BrowserRouter>
    </MuiThemeProvider>
</Provider>

我将path =“/”更改为path =“/ login”。现在/ login和/＃/ login不起作用。

此外，UserLayout始终可见，即使它只在访问以/ user开头的URL时才可见。

Answer 2

您的index.jsx应该包含在BrowserRouter中：

  <Route exact path="/login" component={LoginPage}/>
  <Route path="/user" component={UserLayout}/>

在UserLayout中：

  <Route exact path={`${this.props.match.url}/dashboard} component={UserDashboardPage}/>

React-Router v4允许您在需要时动态定义路由，而不是更高的/ config级别。

我不确定SimpleLayout在您的应用中代表什么。

React路由器子嵌套组件失败

2 个答案: