Я знаю, что есть несколько постов с похожими вопросами, но разными подходами, которые не кажутся понятными.Я хочу узнать больше и иметь возможность разрабатывать несколько приложений, используя React.js и Laravel.
Header.js: импорт файлов
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Link,
Switch,
Route
} from 'react-router-dom';
import Home from './Home';
import About from './About';
import Dashboard from '../admins/Dashboard';
import Contact from './Contact';
Маршрутизатор (BrowserRouter)
<Router>
<div>
<nav className="navbar navbar-expand-lg navbar-dark bg-dark navbar-fixed-top">
<button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarSupportedContent">
<ul className="navbar-nav mr-auto">
<li className="nav-item active">
<Link className="nav-link" to="/" exact
>Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About Us</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/contact">Contact</Link>
</li>
</ul>
<form className="form-inline my-2 my-lg-0">
<input className="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search" />
<button className="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<Switch>
<Route exact path='/' component={Home}/>
<Route exact path="/about" component={About}/>
<Route path='/contact' component={Contact}/>
<Route path='/admins/dashboard' component={Dashboard}/>
</Switch>
</div>
</Router>
Когда я нажимаю на ссылку, она отображает ссылку, но всякий раз, когда я пытаюсь обновить страницу, она отображает ошибку.Я попробовал возможный пример, но ничего не работает.Я не знаю, делаю ли я это неправильно.Я пытался понять, как это понять.Я наткнулся на статью, в которой говорится, что createBrowserHistory устарела и не поддерживается в реакции-маршрутизаторе v4, даже я изо всех сил пытался реализовать этот пример.Есть ли лучший способ справиться с этим?
У меня есть несколько страниц (компонентов).
Index.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
BrowserRouter as Router,
} from 'react-router-dom';
import Header from './Header';
import Footer from './Footer';
export default class Index extends Component {
render() {
return (
<div>
<Header />
<Footer/>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Index />, document.getElementById('app'));
}
about.js
import React, { Component }from 'react';
import { Redirect } from 'react-router-dom';
class About extends Component {
constructor(props)
{
super(props);
}
render(){
return (
<div className="jumbotron">
<h2>About Us</h2>
</div>
);
}
}
export default About;
app.js
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
require('./components/Index');
