Question

我有新的反应，现在正在学习反应路由器。

我想在BrowserRouter中设置多条路线，我不确定它为什么不起作用。

我的代码就是这个

import React, { Component } from 'react';
import {database} from '../firebase';
import _ from 'lodash';

import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';

import List from './List';
import NewPost from './NewPost';

class App extends Component {


  render() {
    return (
      <div className="App container">
      <header className="App-header">

          <h1 className="App-title">Here We Go Again</h1>
        </header>
        <hr/>
       <BrowserRouter>
        <Switch>
          <Route path='/' component={List}/>
          <Route path='/new' component={NewPost}/>
        </Switch>
      </BrowserRouter> 
      </div>

    );
  }
}

export default App;

无论我走的路径如何，它只显示列表中的第一个路径。我试过移动它们所以我肯定知道。它们的功能仍然有效。这只是一次渲染一个问题。

      <BrowserRouter>
        <Switch>
          <Route path='/' component={List}/>
          <Route path='/new' component={NewPost}/>
        </Switch>
      </BrowserRouter>

正如你所看到的，我尝试了一些其他可能的解决方案，在堆栈溢出时添加Switch，但它仍然没有用。

知道如何解决它或我做错了什么？

Answer 1

您需要将单词exact添加到第一条路线。它目前与/匹配任何内容。

  <BrowserRouter>
    <Switch>
      <Route path='/' exact component={List}/>
      <Route path='/new' component={NewPost}/>
    </Switch>
  </BrowserRouter>

如何在App.js中处理多个路由？

1 个答案: