Question

我对React Router无法呈现所有页面/组件有问题。因此，当我单击页面1时，它会呈现其中的内容，但是当我单击页面2或3时，它不会呈现它。它仅呈现第一个Component / Page1。如果可能，我需要一些帮助。

function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
     
     <Route exact path='/Page1' component={Page1}/>
        <Page1/>
     <Route exact  path='/Page2' component={Page2}/>
        <Page2/>
     <Route exact path='/Page3' component={Page3}/>
        <Page3/>
      <Route exact path='/' component={Home}/>

     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to='/'> 
             Home
            </Link>

            <Link to='/page1'> 
             Page 1
            </Link>

            <Link to='/page2'> 
              Page2
            </Link>
      
            <Link to='/page3'> 
              Page3
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar

Answer 1

您的链接未指向相同的路线，您输入了错误，将您的=“ =” / page1“更改为 to ='/ Page1'

Answer 2

我认为您在这里有一些错误：

您的路线与枝形吊灯所指出的不同
您的路线声明不正确：

有关第2点的更多信息：

您已经声明了一条路线，并向其传递了一个组件属性，但是您还渲染了它下面的实际页面；这是不正确的：

<Route exact path='/Page1' component={Page1}/>
  <Page1/>

我不确定您使用的是哪个版本的React Router，但是我认为您必须选择1种方法；要么传递组件道具，要么将实际内容呈现为Route组件的子代：

<Route exact path='/page1' component={Page1}/>

OR

<Route exact path='/page1'>
  <Page1 />
</Route>

Answer 3

有几件事需要讨论。让我们将每个人单独打破：

路由路径不区分大小写

路线路径不像我一开始所认为的那样敏感，也不像问题中的其他路径那样区分大小写，但是我建议您为保持理智而使它们完全相同，并避免其他开发人员不得不怀疑

NavBar不应该拥有自己的路由器

您的Router应该同时包装导航栏和路线。现在它们每个都有独特的路由器

反应路由器完全不在React.Context下工作。您现在的层次结构是：

└── App
    ├── NavBar
    │   └── Router (Router A)
    └── Router (Router B)

所有React Router HoC（<Link/>，<Route/>等）在幕后调用useContext()，以便获得<Router/>创建的最近上下文。由于<NavBar/>有自己的Router，因此它将受到影响。您需要这样：

.
└── App
    └── Router (Only Router)
        └── NavBar

这样，<Link/>中的NavBar会影响 仅且正确的 路由器Context。

不正确的开关孩子

<Switch/>应该仅以Route或Redirect作为子元素，而您却拥有简单的子元素，这也可能是导致问题的原因

来自<Switch>#children: node

<Switch>的所有子代都应为<Route>或<Redirect> 元素。只有第一个与当前位置匹配的孩子会呈现。

工作示例

将所有内容放在一起，我们可以看一下以下示例：

const {render} = ReactDOM;
const {BrowserRouter: Router, Switch, Link, Route} = ReactRouterDOM;

const BadNavBar = () => (
  <div>
    <h2>Bad Nav Bar</h2>
    <p>This Nav Bar will affect its own personal Router</p>
    <Router> {/* Router A */}
      {/*
        * These Links will only change the path of Router A
        * because that is the context they will receive internally
        * when their components call for useHistory (this is hidden from you)
        */}
      <Link to="/">Home</Link>
      <Link to="/page1">Page 1</Link>
      <Link to="/page2">Page 2</Link>
    </Router>
  </div>
);

const GoodNavBar = () => (
  <div>
    <h2>Good Nav Bar</h2>
    <p>This Nav Bar will affect the "right" Router because that's the one Context it will use</p>
    <div>
      {/*
        * These Links will change the path of the nearest Router
        * in the component hierarchy (or throw an error if there is
        * no Router in the hierarchy)
        */}
      <Link to="/">Home</Link>
      <Link to="/page1">Page 1</Link>
      <Link to="/page2">Page 2</Link>
    </div>
  </div>
);

const App = () => (
  <div>
    <BadNavBar />
    <Router> {/* Router B */}
      <GoodNavBar />
      <Switch>
        <Route exact path="/">I'm Home</Route>
        <Route exact path="/page1">I'm Page 1</Route>
        <Route exact path="/page2">I'm Page 2</Route>
      </Switch>
    </Router>
  </div>
);

render(
  <App />,
  document.getElementById("app")
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.js"></script>

<div id="app"></div>

使用代码的工作示例

基于上面的示例，您需要以下内容：

const {render} = ReactDOM;
const {BrowserRouter: Router, Switch, Link, Route} = ReactRouterDOM;

const Home = () => <div>Home</div>;
const Page1 = () => <div>Page 1</div>;
const Page2 = () => <div>Page 2</div>;
const Page3 = () => <div>Page 3</div>;

function NavBar(props) {
  // Remove the Router here
  return (
    <div className="nav">
      <div className="nav1">
        <Link to='/'> 
          Home
        </Link>
        <Link to='/page1'> 
          Page 1
        </Link>
        <Link to='/page2'> 
          Page2
        </Link>
        <Link to='/page3'> 
          Page3
        </Link>
      </div>
    </div>
  );
}

// export default NavBar  

function App() {
  // Move NavBar into the Router
  // Remove the explicit pages since that's what the Routes are for
  return (
    <div className="App">
      <Router>
        <NavBar/>
        <Switch>
          <Route exact path='/Page1' component={Page1}/>
          {/*<Page1/>*/}
          <Route exact path='/Page2' component={Page2}/>
          {/*<Page2/>*/}
          <Route exact path='/Page3' component={Page3}/>
          {/*<Page3/>*/}
          <Route exact path='/' component={Home}/>
        </Switch>
      </Router>
    </div>
  );
}

// export default App;

render(
  <App />,
  document.getElementById("app")
);

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/react-router-dom@5.2.0/umd/react-router-dom.js"></script>

<div id="app"></div>

Answer 4

您输入了错字：/ page1！== / Page1

声明一个常数以保持一致性。例如：

const route = "/home";
function App() {
  return (
    <div className="App">
     <NavBar/>
    <Router>
    <Switch>
       <Route exact path={route} component={Page1}/>
     </Switch>
     </Router>
     
      
    </div>
  );
}

export default App;




function NavBar(props) {
    return (
        <Router>
        <div className="nav">
             <div className="nav1">
            <Link to={route}> 
             Page 1
            </Link>
         </div>
          </div>
          </Router>

        )
}

export default NavBar

反应/路由器不渲染组件

4 个答案:

路由路径不区分大小写

NavBar不应该拥有自己的路由器

不正确的开关孩子

工作示例

使用代码的工作示例