Я использую React Router 4 на странице React, но не вижу своего компонента в пути маршрута

Question

[

import React, { Component } from "react";
import { BrowserRouter as Router , Route } from "react-router-dom";

const NewRout = () => {
  return(
    <p> MY ROUTE </p>
  );
}
class App extends Component {
  render() {
    return (
        <Router>
          <Route path="/signin" Component={NewRout} />
        </Router>
    );
  }
}

export default App;

] 1 Я использую маршрутизатор на моей странице реакции.Но я не вижу выхода.Я импортирую BrowserRouter и Route из response-route-dom и пытаюсь показать компонент mt внутри маршрута. Но это не работает для меня. Пожалуйста, помогите мне, как решить эту проблему.Спасибо

<BrowserRouter><Route path="signin" Component={Signin} /></BrowserRouter>

Answer 1

У вас есть ошибка на вашем пути:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
import "./styles.css";

const Home = () => (
  <h1>
    Home <Link to="/signin">SING</Link>
  </h1>
);

const SingIn = () => (
  <h1>
    <Link to="/">Home</Link>
    This is singin page
  </h1>
);

ReactDOM.render(
  <div>
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/signin" component={SingIn} />
      </div>
    </BrowserRouter>
  </div>,
  document.getElementById("root")
);

Теперь найдите http://localhost:port/singin, вы увидите ваш компонент.

Примечание: я добавил / перед вашим путем.Это означает, что вы собираетесь signin от своего корня, который /.

Вам необходимо использовать реквизит с именем exact, который соответствует точному маршруту.

Попробуйте это SandBox

https://codesandbox.io/s/moj8kxp0nx