Question

因此，基本上，我有一个导航栏，可在路线之间切换。页面加载时，默认情况下会转到/ home，但实际上不会呈现正在提供的App组件。我必须单击将您带到/ home的按钮，以进行渲染。

我在Redux中使用react-router-dom。

这是我的BrowserRouter：

<Provider store = {store}>
    <BrowserRouter>
      <div>
        <Header />
        <Route exact path = "/home" component={App}> </Route>
        <Switch>
          <Route  path = "/about" render = {() => <AboutUs />}></Route>
          <Route  path = "/contact" render = {() => <Contact />}></Route>
          <Route  path = "/services" render = {() => <Services />}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

有什么建议吗？

Answer 1

默认路由为/而非/home。您需要设置重定向。

<Route exact path="/" render={() => ( <Route exact path="/home" component={App} /> )} />

Answer 2

将/home路线和其他所有路线放入Switch：

<Provider store = {store}>
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route exact path = "/home" component={App}> </Route>
          <Route  path = "/about" render = {() => <AboutUs />}></Route>
          <Route  path = "/contact" render = {() => <Contact />}></Route>
          <Route  path = "/services" render = {() => <Services />}></Route>
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>

Answer 3

您需要将use Illuminate\Support\Facades\File; $path=your_desire_folder_path; if (!File::exists($path)) { mkdir(public_path($path), 0777, true); }放在/home内

<Switch>

在<Route exact path = "/home" component={App}> </Route>中放在代码行上方的方法例如：-

<Switch>

React-Router-dom v4无法在页面加载时呈现组件

3 个答案: